Svelte Simple Datatables is a headless library for creating datatable components with Svelte. It provides a simple API to dynamically interact with iterable data on the client-side, allowing you to filter, paginate, sort, and select data. It can handle server-side data processing, supports Typescript, and has no other required dependencies.
Skeleton provides a simple Table Component for implementing tabular data for
presentational purposes. However, this lacks more powerful features, such as search, sort, and filter. This is where Svelte Simple
Datatables comes in. To integrate this, we'll opt for Skeleton's
Table Elements, which provided themed styles to native HTML tables. The end result will
be a new
<Datatable /> component, which you may use directly in your own application.
Additionally, we'll also create a number of accessory components to handle search, filter, sort, and pagination features. These smaller components will help augment and extend the overall datatable component.
If you're looking for a quick start or reference project, please refer to our opinionated template on GitHub.
Add Svelte Simple Datables to your Skeleton project by running the following command.
Next, let's plan out our overall project structure.
data.tsif you are loading data from the client or
api.tsif your data is coming from the server. This will be explained further on, but for now just create the blank Typescript file.
- All of the files in this directory will be used for accessory components.
- This file will contain the
<Datatable />component, the associated logic, and render the accessory components.
- This is where we'll render and access the
<Datatable />component in this example.
Creating the Components
Each component will need to be configured based on the scope. Select your preference below.
4. Import Datatable Component
With our Datatable component now complete, let's import and add it to our
To ensure our datatables are visible on all screen sizes, make sure to utilize Tailwind's responsive design best practices. You can also utilize the Tailwind Element .table-container class, which should be applied to a wrapping element.
This guide has been provided courtesy of Kyle Malloy, username
@spacecup on Skeleton's Discord server.