svelte-datatables-net

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

npm install svelte-datatables-net

EXAMPLES AND DEVELOPING

To run the examples from /src/routes:

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) | (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<Generic> | 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<Generic> | 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<Generic> | 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<Generic> | 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) | (a: Generic, b: Generic) => number | NO | A STANDARD FUNCTION TO SORT ALPHABETICALLY. |