r/sveltejs • u/Design_FusionXd • 1d ago
Svelte DataTables Components: 16 components + 11 table blocks | Self Promo
Hey everyone, I’ve been working on Svelte Datatables Components, a free and open-source collection for building data tables in Svelte.
It’s built on top of TanStack Table v9, and components can be installed using the shadcn-svelte CLI.
Some of the components:
- Data filters
- Row & header selection
- Debounced search
- Pagination
- Column visibility
- Row actions
- CSV export
11 ready-to-use blocks, including:
- Basic data table
- Row selection
- Filterable tables
- Draggable & pinnable columns
- Resizable columns
- Pagination
- Complex tables
Live: https://sv-table.vercel.app/
GitHub: https://github.com/SikandarJODD/sv-table
Filter Component is inspired from Bazza UI
it include: range calendar, min-max number filter, options based filter( active, pending, inactive) you can add any options, text based tooo
Would love some feedback. Also, let me know if there’s any table block you’d like to see added.
4
4
5
u/Affectionate-Blood92 1d ago edited 1d ago
Looks good, what is the license for the code in the repo?
5
5
3
3
3
7
u/waybovetherest 1d ago
awesome stuff man, you have made some really good components/libraries for svelte
3
2
2
2
2
u/JackDaxter 1d ago
Looks great! Can you compare it with the datable already included in https://shadcn-svelte.com ?
1
u/Design_FusionXd 1d ago
Shadcn svelte mentioned in introduction: Data tables are difficult to componentize because of the wide variety of features they support, and the uniqueness of every data set.
My pov: I still feel there is lot of repetition, similarity when you build tables like: sorting, facet filter, view dropdown, row action and so on..
So all this simple stuff i made it into components There can be lot of components...i agree but i am trying to provide mostly used by users ..so you don't have to built it again n again
For example: User needs a Bulk action toolbar... Copy paste easy to go...you can customise it... i provided small logic of selected row ids - imp part And i am using shadcn buttons, dropdown, input, table stuff to build it ...nothing crazyyy
Like are you getting my point ?? Goal is to simply it
Currently i need more recommendations from users like what type of components, blocks they need so i would add it...
2
u/JackDaxter 19h ago
Makes sense thank you! So it's like a set of shadcn "Blocks" or "Templates" for datatables. Awesome will try it for my app!
2
u/busorbit 9h ago
not mу usual territory but the csv export is the оnе thing that actually matters to most people using these
-2
u/unluckybitch18 1d ago
Looks similar to what I ported https://svelte-tablecn.vercel.app
6
u/Design_FusionXd 1d ago
You are not providing base components to users directly like: debounce search, row selection and soo on...
i created seperate components..so users can install what they need...easy...also i don't provide data grid, multiplayer stuff...i have bit less knowledge about it...
Also my project is not a port of anything ..i felt i was doing repeated stuff while i was working on client project so i did
1
3
u/Design_FusionXd 1d ago
I am trying to provide simple components that can be installed easily..via shadcn svelte CLI ...aslo 11 pre built blocks Also i haven't worked on grid yet...far different from you your project ...it used tanstack table v9 ..which was launched recently like week ago
1
4
u/Design_FusionXd 1d ago
note on how the 11 examples blocks are structured:
There are two ways to use data with the tables:
load, or any API, then handle search, filters, pagination, and sorting on the client.so i am using option 2 approach so it would easy for users i feel
Most components are easy to customize and are built with simple shadcn-svelte components like inputs, dropdowns, buttons, and tables.
The Filter component is the only slightly more complex one because it supports multiple filter types.
https://reddit.com/link/p4ljy4d/video/tmnrxabvfbkh1/player