vue3-bc-datatable

This is a complete datatable component for vuejs.
658
vue vuejs vue3 table datatable vue3-bc-datatable
Install
npm install vue3-bc-datatable
Latest Version:0.1.0
Vue:3
Last Updated:Mar 1, 2024
Links: GitHub  ·  npm
Maintainer: cboissard

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

Related Packages

vue2-datatable-component

The best Datatable for Vue.js 2.x which never sucks

37,016 870
datatable table vue
@unicorns/data-table

Vue component for rendering data-tables

12,383 3
datatable table vue
vue2-datatable-component-uikit

The best Datatable for Vue.js 2.x which never sucks... with ui-kit

4,771 870
datatable table vue
@laraveldaily/vue2-datatable

Datatable for Vue.js 2.x

3,285 6
datatable table vue
vue-datatable-component

Datatable encapsulation for Vue 1.x

646 23
datatable table vue

Version History

Version Released Vue License
0.1.0 ^3.0.0
0.0.19 ^3.0.0
0.0.18 ^3.0.0
0.0.17 ^3.0.0
0.0.16 ^3.0.0
Pre-releases (6)
Version Released Vue License
0.0.0-6 ^3.0.0
0.0.0-5 ^3.0.0
0.0.0-4 ^3.0.0
0.0.0-3 ^3.0.0
0.0.0-2 ^3.0.0