https://github.com/kjj6198/svelte-data-table
A simple, small, light-weight but powerful data table in svelte.
https://github.com/kjj6198/svelte-data-table
data-table svelte svelte3 table
Last synced: 4 months ago
JSON representation
A simple, small, light-weight but powerful data table in svelte.
- Host: GitHub
- URL: https://github.com/kjj6198/svelte-data-table
- Owner: kjj6198
- Created: 2020-05-17T19:06:01.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-07-15T16:46:04.000Z (almost 4 years ago)
- Last Synced: 2025-11-06T01:18:30.518Z (7 months ago)
- Topics: data-table, svelte, svelte3, table
- Language: HTML
- Size: 32.2 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## svelte-data-tabu
A simple, small, light-weight but powerful data table in svelte.
## Usage
### Config
```js
export const config = {
no: {
name: "name", // head column
type: "number", // number, string -> will align in different way
formatter: (t) => `#${t}`, // how to format data
hideMobile: true, // hide in mobile (will deprecate probably)
},
name: {
name: "FISH",
type: "text",
align: "left", // text align
className: "fishName", // custom class name
},
price: {
name: "價格",
sortable: true, // sortable in table head
formatter: function priceFormatter(t) {
return formatNumber(t);
},
comparator: priceComparator, // when sortable is ture, comparator is required.
},
price08: {
accessor: (d) => d.price, // a function to define how to get data in this column
},
};
```
## TODOs
- [ ] pagination support
- [x] Fixed header
- [x] sortable
- [ ] slot
- [ ] expanded view
- [ ] group
- [ ] row and column event handler
- [ ] selectable
- [ ] Event communication
- [ ] a11y support
- [ ] test
- [ ] TypeScript support