vue3-bc-datatable

Vue 3 DataTable

This is a complete datatable component for vuejs.

Examples : https://stackblitz.com/edit/vue3-bc-datatable-examples

Use

Installation

npm install vue3-bc-datatable

Initialisation

Import component and derivatives as types :

import {
   Datatable, // component
   DatatableColumn, // type column
   DatatableRow,  // type row
   DatatableSort, // type sorted values
} from 'vue3-bc-datatable';

Import the css too :

import 'vue3-bc-datatable/dist/style.css';

API

Props

prop	type	default	description
	Identification
identifier	string	""	to identify while debuging
title	sting	""	A title above the table
	Data
columns	Partial<DatatableColumn>[]	[]	The columns of the table, configuration of features and design
rows	Partial<DatatableRow>[]	[]	All the rows of the table (without filtering, sorting, pagination, ...)
propId	string	"id"	the property of a row to use as id for the row, must be valid
	User experience
loading	boolean	false	display the loader section for user experience
loadingMessage	string	"Loading in progress...	The message display if no data but loading
noResultsMessage	string	"No results"	The message display if no data because of an interaction (filters)
noDataMessage	string	"No data"	The message display if no data
	Manipulation
sorts	DatatableSort	undefined	The way to sort the rows to display
multiSort	boolean	false	Enable the multi column sort
filters	Function | DatatableFilter	undefined	The way to filter the rows to display
expand	DatatableExpansion	undefined	The way to filter the rows to display
select	DatatableSelection	undefined	To check (checkbox) the rows in the selection
pagination		Not Implemented Yet !!
	Design
hideHeader	boolean	false	To remove the thead from the table
displayFooter	boolean	false	To dispaly the tfoot of the table
displayFilters	boolean	false	To display the row with inputs in header or footer for filtering
stick	DatatableSticky	undefined	to set sticky the header (thead) or footer (tfoot)
density	'default' | 'comfortable' | 'compact' | number | null	'default'	for the cell height and padding
dark	boolean	false	To set in a dark theme (see css variable to change colors)
dividers	DatatableDividers	false	To display border between rows (for cols see options in columns)
tableStyle	StyleProps	{}	vue props style to apply on table
tableClass	ClassProps	string[]	vue props class to apply on table
nested	boolean	false	Change a bit the design, used for the nested table

Details DatatableColumn

Details DatatableRow

Events

event	data	description
displaying	DatatableRow[]	The rows displayed, after sort, filters, ...
update:sorts	DatatableSort	The new way of sorting rows (after interaction with sort on columns)
update:filters	DatatableFilter	The new way of filtering rows (after interaction with filter input on columns)
update:select	DatatableSelection	The new selection of rows (after checking a selection checkbox)
update:expand	DatatableExpansion	The new expansions (after collpasing or expanding an expansion)

Slots

slot name	data	description
	Wrapper
title	getThis	To customise the Title zone on top of the table wrapper
top	getThis	To customise the top zone (below title) of the table wrapper, useful to use a custom filters or any other features in the component
default	getThis	To replace the table component in the wrapper
pagination	getThis + ___	To define your own pagination
bottom	getThis	To replace the table component in the wrapper
	Table
header	getThis	To customize thead content
progress	loading + dark + density	To replace the default progress-bar when loading
body	getThis	To customize tbody content
no-data	filters + loading + columns + displaying + message	To set a custom content in the tr for message when no rows displayed
footer	getThis	To customize tfoot content
	Header/Footer (datatable-headers)
header-tr		To set the content of the header tr
header-<columnId>		To set the content of a specific cell (column) of the header tr (use th/td)
header-tr-filters		To set the content of the filters tr
header-<columnId>-filter		To set the content of a cell (column) of the header tr
footer-tr		To set the content of the footer tr
footer-<columnId>		To set the content of a specific cell (column) of the footer tr (use th/td)
footer-tr-filters		To set the content of the filters tr
footer-<columnId>-filter		To set the content of a cell (column) of the footer tr
filters		To use a custom filters cell (use th/td) for every filters of the table
	Content
row-<rowId>		Content of a specfif row
rows		Content of all rows
col-<columnId>-row-<rowId>		Content of a cell (specific column) for a specific row (use th/td)
cols-<columnId>		Content of a cell (specific column) for all rows (use th/td)
cell-<columnId>-row-<rowId>		Content of a cell (specific column) for a specific row
cells-<columnId>		Content of a cell (specific column) for all rows
	Expansion
row-<rowId>-expansion-<expansion>		Content of a specific expansion of a specific row
rows-expansion-<expansion>		Content of a specific expansion of all rows
rows-expansions		content of all expansions

getThis is a computed with all the props, computed, functions useful and the dom ref to the table.

CSS

var	default	description
--bcdatatable-title-font-size	1.8rem	Font size of title
--bcdatatable-background-color-light	white	The main background-color in light mode
--bcdatatable-background-color-light-active	#e1e1e1	The active for interaction element in light mode
--bcdatatable-background-color-light-hover	#cccccc	The hover for interaction element in light mode
--bcdatatable-background-color-dark	#1e1e1e	The main background-color in dark mode
--bcdatatable-background-color-dark-active	#313131	The active for interaction element in dark mode
--bcdatatable-background-color-dark-hover	#444444	The hover for interaction element in dark mode
--bcdatatable-text-color-light	black	Font color in light mode
--bcdatatable-text-color-dark	white	Font color in dark mode
--bcdatatable-text-font-size	0.9rem	Font size of text content
--bcdatatable-button-color-light	lightgray	Button color in light mode
--bcdatatable-button-color-dark	gray	Button color in dark mode
--bcdatatable-button-hover-color-light	gray	Button hover color in light mode
--bcdatatable-button-hover-color-dark	lightgray	Button hover color in dark mode
--bcdatatable-border-options	thin solid	The border style or rows/columns
--bcdatatable-border-color-light	rgba(0, 0, 0, 0.12)	The border color in light mode
--bcdatatable-border-color-dark	hsla(0, 0%, 100%, 0.12)	The border color in dark mode
--bcdatatable-expansion-shadow-light	rgb(50 50 50 / 50%)	The shadow color of expansions in light mode
--bcdatatable-expansion-shadow-dark	rgb(200 200 200 / 50%)	The shadow color of expansions in dark mode
--bcdatatable-expansion-shadow-top	inset 0 4px 10px -8px	The shadow style for top of expansions
--bcdatatable-expansion-shadow-bottom	inset 0 -4px 10px -8px	The shadow style for bottom of expansions

Futur evolutions

• [ ] Pagination add a pagination feature
• [ ] Nested sort sort in nested table
• [ ] Nested filter filter in nested table
• [ ] Nested Slots custom slots for expansions
• [ ] Group rows by values for a column