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

Implementation for stories: https://github.com/thecodejack/svelte-dx-table/tree/main/stories/views

Installation

npm install svelte-dx-table

or

yarn add svelte-dx-table

API

Props

keys of column config

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