https://github.com/thecodejack/svelte-dx-table
dev friendly sveltejs simple table
https://github.com/thecodejack/svelte-dx-table
Last synced: 4 months ago
JSON representation
dev friendly sveltejs simple table
- Host: GitHub
- URL: https://github.com/thecodejack/svelte-dx-table
- Owner: thecodejack
- Created: 2022-01-04T17:35:28.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-01-05T07:54:06.000Z (over 4 years ago)
- Last Synced: 2025-08-20T22:00:15.573Z (10 months ago)
- Language: JavaScript
- Size: 141 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# svelte-dx-table
[](https://www.npmjs.com/package/svelte-dx-table)
[](https://www.npmjs.com/package/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.
```svelte
```
> 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](https://github.com/dasDaniel/svelte-table)
You can also provide `ignoreKeys` incase you want to ignore from default.
```svelte
```
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
```svelte
{
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.
```svelte
```
## Demo
[Click here for Storybook link](https://svelte-dx-table.netlify.app/)
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
| 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
```svelte
{
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