https://github.com/joaquimnetocel/svelte-datatables-net
svelte-datatables-net is a svelte/sveltekit component that turns data into an interactive HTML table. Inspired by datatables.net.
https://github.com/joaquimnetocel/svelte-datatables-net
datatable datatables svelte sveltejs sveltekit
Last synced: about 1 year ago
JSON representation
svelte-datatables-net is a svelte/sveltekit component that turns data into an interactive HTML table. Inspired by datatables.net.
- Host: GitHub
- URL: https://github.com/joaquimnetocel/svelte-datatables-net
- Owner: joaquimnetocel
- Created: 2023-02-22T13:23:50.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2025-05-04T15:09:44.000Z (about 1 year ago)
- Last Synced: 2025-05-07T13:07:38.682Z (about 1 year ago)
- Topics: datatable, datatables, svelte, sveltejs, sveltekit
- Language: Svelte
- Homepage: https://www.npmjs.com/package/svelte-datatables-net
- Size: 547 KB
- Stars: 28
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# svelte-datatables-net
    [](https://twitter.com/joaquimnetocel)
**svelte-datatables-net** is a svelte/sveltekit component that turns data into an interactive HTML table.
## VERSIONS
- VERSION 1.0.0 OR ABOVE WORKS WITH SVELTE 5 ONLY (NEWER AND RECOMMENDED VERSIONS WITH IMPROVEMENTS!)
- PREVIOUS VERSIONS WORKS WITH SVELTE 3, 4 AND 5.
## FEATURES
- POSSIBILITY OF CHOOSING THE SEARCHABLE COLUMNS.
- POSSIBILITY OF CHOOSING THE SORTABLE COLUMNS.
- PAGINATION.
- POSSIBILITY OF CHOOSING AND CHANGING THE NUMBER OF ROWS PER PAGE.
- NON-OPINIONATED STYLING.
- NON-OPINIONATED POSITIONING.
- TYPESCRIPT SUPPORT.
## INSTALLATION
```bash
npm install svelte-datatables-net
```
## EXAMPLES AND DEVELOPING
To run the examples from `/src/routes`:
```bash
git clone https://github.com/joaquimnetocel/svelte-datatables-net.git
cd svelte-datatables-net
npm install
npm run dev
```
## COMPONENT STRUCTURE
- `createData`: A function to create a state with the data.
- `Search`: A svelte component with a search input.
- `RowsPerPage`: A svelte component with a select input to choose the number of rows per page.
- `Pagination`: A svelte component for pagination.
- `Sort`: A svelte component that enable sorting for a specific column.
- `typeData`: If you are using typescript, it is a type definition for the data state.
## PARAMETERS AND PROPS
- PARAMETERS OF `createData`:
| PARAMETER | DESCRIPTION | TYPE | REQUIRED | DEFAULT |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------- | ------------------------------------------- |
| `data` | AN ARRAY WITH THE DATA. | `Generic[]` | YES | - |
| `searchablekeys` | AN ARRAY WITH THE SEARCHABLE COLUMNS (KEYS OF `data`). | `(keyof Generic)[]` | NO | `undefined` |
| `searchString` | THE SEARCH STRING CAN BE SET PREVIOUSLY WITH THIS PROP. | `string` | NO | `''` (EMPTY STRING) |
| `rowsPerPage` | THE INITIAL NUMBER OF ROWS PER PAGE. | `string` (NUMERIC STRING OR `'all'`) | NO | `'all'` |
| `sortBy` | THE INITIAL SORT COLUMN (A KEY OF `data`). | `keyof Generic` | NO | `undefined` (NO INITIAL SORTING) |
| `sortOrder` | THE INITIAL SORT ORDER. | 'ascending' OR 'descending' | NO | 'ascending' |
| `sortFunction` | A COMPARE FUNCTION THAT SPECIFIES THE INITIAL SORT ORDER. ([MORE DETAILS HERE](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)) | `(a: Generic, b: Generic) => number` | NO | A STANDARD FUNCTION TO SORT ALPHABETICALLY. |
| `activePage` | ACTIVE PAGE FOR PAGINATION. | number | NO | `1` |
- PROPS OF `Search`:
| PROP | DESCRIPTION | TYPE | REQUIRED | DEFAULT |
| ------------- | ------------------------------------ | ------------------- | -------- | -------------- |
| `data` | data state created with `createData` | `typeData` | YES | - |
| `placeholder` | SEARCH INPUT PLACEHOLDER. | `string` | NO | 'Type here...' |
| `class` | CSS CLASSES OF THE SEARCH INPUT. | `string` | NO | - |
| `style` | CSS STYLES OF THE SEARCH INPUT. | `string` | NO | - |
- PROPS OF `Pagination`:
| PROP | DESCRIPTION | TYPE | REQUIRED | DEFAULT |
| --------------- | ------------------------------------------ | ------------------- | -------- | ------- |
| `data` | data state created with `createData` | `typeData` | YES | - |
| `previous` | PREVIOUS BUTTON TEXT. | `string` | NO | - |
| `next` | NEXT BUTTON TEXT. | `string` | NO | - |
| `style` | CSS STYLES FOR PAGINATION ITEMS. | `string` | NO | - |
| `class` | CSS CLASSES FOR PAGINATION ITEMS. | `string` | NO | - |
| `styleDisabled` | CSS STYLES FOR DISABLED PAGINATION ITEMS. | `string` | NO | - |
| `classDisabled` | CSS CLASSES FOR DISABLED PAGINATION ITEMS. | `string` | NO | - |
| `styleActive` | CSS STYLES FOR ACTIVE PAGINATION ITEMS. | `string` | NO | - |
| `classActive` | CSS CLASSES FOR ACTIVE PAGINATION ITEMS. | `string` | NO | - |
- PROPS OF `RowsPerPage`:
| PROP | DESCRIPTION | TYPE | REQUIRED | DEFAULT |
| ------- | ------------------------------------ | ------------------- | -------- | ------- |
| `data` | data state created with `createData` | `typeData` | YES | - |
| `class` | CSS CLASSES OF THE SELECT INPUT. | `string` | NO | - |
| `style` | CSS STYLES OF THE SELECT INPUT. | `string` | NO | - |
- PROPS OF `Sort`:
| PROP | DESCRIPTION | TYPE | REQUIRED | DEFAULT |
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------- | ------------------------------------------- |
| `data` | data state created with `createData` | `typeData` | YES | - |
| `key` | COLUMN TO SORT. | `keyof Generic` | YES | - |
| `iconSize` | SIZE OF THE SORT ICON | `number` | NO | 10 |
| `sortFunction` | A COMPARE FUNCTION THAT SPECIFIES THE SORT ORDER. ([MORE DETAILS HERE](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)) | `(a: Generic, b: Generic) => number` | NO | A STANDARD FUNCTION TO SORT ALPHABETICALLY. |