vue3-bc-datatable v0.1.0

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

| 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

Slots

| 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-\ | | 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-\-filter | | To set the content of a cell (column) of the header tr | | footer-tr | | To set the content of the footer tr | | footer-\ | | 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-\-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-\ | | Content of a specfif row | | rows | | Content of all rows | | col-\-row-\ | | Content of a cell (specific column) for a specific row (use th/td)| | cols-\ | | Content of a cell (specific column) for all rows (use th/td) | | cell-\-row-\ | | Content of a cell (specific column) for a specific row | | cells-\ | | Content of a cell (specific column) for all rows | | Expansion | row-\-expansion-\ | | Content of a specific expansion of a specific row | | rows-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

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