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
DEMOS
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
functionCreateDatatable: A function to create an object with all the states of the component.Datatable: Datatable element surrounding your table structure.Search: A svelte component with a search input.RowsPerPage: A svelte component with a select input to choose the number of rows per page.PaginationItems: A svelte component for pagination.Sort: A svelte component that enable sorting for a specific column.typeDatatable: If you are using typescript, it is a type definition for the component states.
PARAMETERS AND PROPS
- PARAMETERS OF
functionCreateDatatable:
| PARAMETER |
DESCRIPTION |
TYPE |
REQUIRED |
DEFAULT |
parData |
AN ARRAY WITH THE DATA. |
Generic[] |
YES |
- |
parSearchableColumns |
AN ARRAY WITH THE SEARCHABLE COLUMNS (KEYS OF parData). |
(keyof Generic)[] |
NO |
undefined |
parSearchString |
THE SEARCH STRING CAN BE SET PREVIOUSLY WITH THIS PROP. |
string |
NO |
'' (EMPTY STRING) |
parRowsPerPage |
THE INITIAL NUMBER OF ROWS PER PAGE. |
string (NUMERIC STRING OR 'all') |
NO |
'all' |
parSortBy |
THE INITIAL SORT COLUMN (A KEY OF parData). |
keyof Generic |
NO |
undefined (NO INITIAL SORTING) |
parSortOrder |
THE INITIAL SORT ORDER. |
'ascending' OR 'descending' |
NO |
'ascending' |
parSortFunction |
A COMPARE FUNCTION THAT SPECIFIES THE INITIAL SORT ORDER. (MORE DETAILS HERE) |
(a: Generic, b: Generic) => number |
NO |
A STANDARD FUNCTION TO SORT ALPHABETICALLY. |
parActivePage |
ACTIVE PAGE FOR PAGINATION. |
number |
NO |
1 |
| PROP |
DESCRIPTION |
TYPE |
REQUIRED |
DEFAULT |
propDatatable |
A BINDABLE OBJECT WITH THE DATATABLE STATES (OBJECT CREATED WITH functionCreateDatatable) |
typeDatatable<Generic> |
YES |
- |
| PROP |
DESCRIPTION |
TYPE |
REQUIRED |
DEFAULT |
propPlaceholder |
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
PaginationItems:
| PROP |
DESCRIPTION |
TYPE |
REQUIRED |
DEFAULT |
propTag |
HTML TAG OF THE PAGINATION ITEM. |
'span' OR 'div' OR 'li' OR 'button' OR 'a' |
YES |
- |
propInnerTag |
HTML TAG INSIDE THE PAGINATION ITEM. |
'span' OR 'div' OR 'li' OR 'button' OR 'a' |
NO |
span |
propPrevious |
PREVIOUS BUTTON TEXT. |
string |
NO |
- |
propNext |
NEXT BUTTON TEXT. |
string |
NO |
- |
propShortMode |
IF IN SHORT MODE, PAGINATION WILL SHOW ONLY FORWARD AND BACKWARD BUTTONS. |
boolean |
NO |
false |
propShortModeLimit |
IF THE NUMBER OF PAGES IS GREATER THAN propShortModeLimit THE SHORT MODE IS ACTIVATED. |
number |
NO |
1000 |
style |
CSS STYLES FOR PAGINATION ITEMS. |
string |
NO |
- |
class |
CSS CLASSES FOR PAGINATION ITEMS. |
string |
NO |
- |
propDisabledStyle |
CSS STYLES FOR DISABLED PAGINATION ITEMS. |
string |
NO |
- |
propDisabledClass |
CSS CLASSES FOR DISABLED PAGINATION ITEMS. |
string |
NO |
- |
propActiveStyle |
CSS STYLES FOR ACTIVE PAGINATION ITEMS. |
string |
NO |
- |
propActiveClass |
CSS CLASSES FOR ACTIVE PAGINATION ITEMS. |
string |
NO |
- |
propInnerClass |
CSS CLASSES FOR THE TAG INSIDE PAGINATION ITEMS. |
string |
NO |
- |
propInnerStyle |
CSS CLASSES FOR THE TAG INSIDE PAGINATION ITEMS. |
string |
NO |
- |
| PROP |
DESCRIPTION |
TYPE |
REQUIRED |
DEFAULT |
class |
CSS CLASSES OF THE SELECT INPUT. |
string |
NO |
- |
style |
CSS STYLES OF THE SELECT INPUT. |
string |
NO |
- |
| PROP |
DESCRIPTION |
TYPE |
REQUIRED |
DEFAULT |
propDatatable |
AN OBJECT WITH THE DATATABLE STATES (OBJECT CREATED WITH functionCreateDatatable) |
typeDatatable<Generic> |
YES |
- |
propColumn |
COLUMN TO SORT. |
keyof Generic |
YES |
- |
propIconSize |
SIZE OF THE SORT ICON |
number |
NO |
10 |
propSortFunction |
A COMPARE FUNCTION THAT SPECIFIES THE SORT ORDER. (MORE DETAILS HERE) |
(a: Generic, b: Generic) => number |
NO |
A STANDARD FUNCTION TO SORT ALPHABETICALLY. |
