svelte-datatables-net

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

• REPL: BOOTSTRAP 5 EXAMPLE
• REPL: SKELETON EXAMPLE
• REPL: FETCH EXAMPLE

EXAMPLES AND DEVELOPING

ONCE YOU'VE INSTALLED THE DEPENDENCIES WITH npm install, START A DEVELOPMENT SERVER TO RUN THE EXAMPLES IN THE routes FOLDER WITH 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

• PROPS OF Datatable:

PROP	DESCRIPTION	TYPE	REQUIRED	DEFAULT
propDatatable	A BINDABLE OBJECT WITH THE DATATABLE STATES (OBJECT CREATED WITH functionCreateDatatable)	typeDatatable<Generic>	YES	-

• PROPS OF Search:

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	-

• PROPS OF RowsPerPage:

PROP	DESCRIPTION	TYPE	REQUIRED	DEFAULT
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
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.