svelte-dx-table

Simple dev friendly Svelte component for building a HTML Table with basic features like sorting by default. Generated component is a raw HTML one which has classes to apply styling as well.

You can generate table by just passing array of objects as following.

<SimpleTable data={data} />

Note: svelte-dx-table is for simplicity as of now. It is more of making a table out of array of objects instead spending time on building config to render a simple table. If you are looking for advanced features, would recommend to check svelte-table

You can also provide ignoreKeys incase you want to ignore from default.

<Table {data} ignoreKeys={["dob"]} />

Columns config(via columns prop) is not a array of objects instead it will be map, which can make you add config for a necessary columns only. Check example

<Table {data} columns={{
      dob: {
        key: "dob",
        formatter: (val) => {
          return new Intl.DateTimeFormat("en-US").format(new Date(val));
        }
      }
    }}/>

Note that key inside column config is mandatory.

If incase, you want to specify order of columns, you can use keys prop in which you can provide keys of row object in the order you want.

<Table {data} keys={["name", "gender","age", "email"]} />

Demo

Click here for Storybook link

Installation

npm install svelte-dx-table

or

yarn add svelte-dx-table

API

Props

| Prop Name | mandatory | Description | Default Value | | ---------- | --------- | ------------------------------------------------------------------------------------------------- | ------------- | | data | yes | rows of data that needs to be passed | [] | | columns | | column config for necessary columns as a map. Refer following for more info available properties. | {} | | keys | | keys of array of objects(data) that needs to be rendered | [] | | ignoreKeys | | ignore keys of object that shouldn't be rendered | [] | | tableClass | | class that needs to be added as part of Table | "" | | sortKey | | column/object key on which sort needs to be applied | "" | | sortType | | "normal" or "reverse" | "normal" |

keys of column config

| key Name | Description | definition | | ------------ | -------------------------- | ------------------------------------------------ | | key | key of objects in the data | mandatory field if added in column config | | header | | (key) => string | | format | | (val) => string | | headerClass | string | "" | | sortFunction | compare function | (firstValue, SecondValue, key) => 1 or -1 or 0 |

As informed previously columns prop is a map. Check columns prop of following a reference

<Table {data} columns={{
  dob: {
    key: "dob",
    formatter: (val) => {
      return new Intl.DateTimeFormat("en-US").format(new Date(val));
    },
  },
  age: {
    key: "age",
    formatter: (val) => {
      return `${val} years`;
    },
  }
}}/>

Development

npm install
npm run storybook

License

MIT