This web component allows to create a table with tabulator-tables.
npm install @dbp-toolkit/tabulator-tableThis web component allows to create a table with tabulator-tables.
You can install these components via npm:
``bash`
npm i @dbp-toolkit/tabulator-table
After you have installed the tabulator-table component via npm you can use this example to create interactive, sortable tables. This component is a wrapper around tabulator.
`html`
type="module"
src="node_modules/@dbp-toolkit/tabulator-table/dist/dbp-tabulator-table.js">
Or you can include the JS files directly via CDN:
`html`
type="module"
src="https://unpkg.com/@dbp-toolkit/tabulator-table@0.0.1/dist/tabulator-table.js">
`html`
- lang (optional, default: de): set to de or en for German or English
- example identifier
- (optional string, default: table): set the css selector id of the table element
- example options
- (optional object, can be set later, default: {
layout: "fitColumns", autoColumns: true, }): set the options for the tabulator table - example - you can set a tabulator to automatically generate its own columns by setting the option autoColumns: trueautoColumnsDefinitions:[
and you can still automatically edit generated columns by using the function
{field:"
...
], or add translations for the header column titles by using langdata
- (optional array, can be set later or can be updated): set the data for the tabulator table
- example pagination-enabled
- (optional bool, default: false): set to true if you want a pagination shown
- example pagination-size
- (optional number, default: 10): sets the pagination size, if pagination is enabled
- example select-rows-enabled
- (optional bool, default: false): allows the user to select rows by clicking on them
- example collapse-enabled
- (optional bool, default: false): add columns that do not fit into the table into a hidden list of column titles and values
- example responsive:3
- hint: If you want to set one or more columns into a list of titles and values, you need to set said columns to a responsive value bigger
than 0 (e.g. ) and to set the columns' width so that they will not all fit into the tabulator
| Event | Description |
| ------------------------------------------------- | ------------------------------------------------------ |
| dbp-tabulator-table-collapsible-event | Event to tell if the component is in collapsible state |dbp-tabulator-table-row-selection-changed-event
| | Tabulator table rowSelectionChanged event |dbp-tabulator-table-built
| | Fired after table is built |
- getData(): returns the tabulator data.setData(data)
- : sets data of the tabulator table.data
- is an array of data which should be shown in the table.getRows()
- : returns an array with all the row components of the table.selectAllRows()
- : selects all rows.deselectAllRows()
- : deselects all rows.getSelectedRows()
- : returns an array with all the selected rows of the table.checkAllSelected()
- : checks if all rows are selected.checkNoneSelected()
- : checks if no row is selected.deleteSelectedRows()
- : deletes the selected rows.updateRow(row, newData)
- : updates a given row of the tabulator table with new data. -row represents the row object we want to update. -newData represents the new data we want to update. it has to be an object {'column': 'value', ...}deleteRow(row)
- : deletes the given row from the specified tabulator table. -row represents the id of the row we want to delete.deleteSelectedRows()
- : this function deletes the selected rows (by clicking) of the tabulator.getColumns()
- : returns an array with all the column components of the table.setColumns(newColumns)
- : sets new columns to the tabulator.newColumns
- is an array with the new column definitions.getColumnsFields()
- : returns an array with all the column fields of the table.setFilter(listOfFilters)
- : filters the tabulator table according to the given list of filters.removeFilter()
- : removes the filters set on the tabulator.expandAll()
- : expands all the collapsed columns inside hidden lists of the tabulator tablecollapseAll()
- : collapses all the expanded columns inside hidden lists of the tabulator tabledownload(type, dataName)
- : downloads the selected rows or the entire tabulator data if none are selected in the specified file formattype
- represents the file format to be downloadeddataName
- is the name of the file to be downloadedgetPage()
- : returns the current table page.setPage()
- : sets the current table page.getLang()
- : returns the lang parameter.
In best practice options is set if the dom is already rendered.this._('#my-table-component).options = myoptions
You can set this attribute with the css selector. (e.g.: )
Set data only works if the options are set before.
dbp-tabulator-table needs the tabulator-tables/css/tabulator.min.css in the package path and@dbp-toolkit/common/icons/
the icons in imported.
`bashget the source
git clone git@github.com:digital-blueprint/toolkit.git
cd toolkit/packages/tabulator-table
Jump to