npm i better-data-table
const { renderDataTable } = require('better-data-table');
// renderDataTable :: object -> string -> [object] -> Node
renderDataTable(configForTheTable, 'idForDomElement', data);
{
defaultOptions: {
density: number,
showNbResults: number,
pagination: number,
sorting: {
field: string,
asc: boolean
},
primaryKey: string,
tableStyle: string
},
allowedOptions: {
density: [{
label: string,
value: number
}],
showNbResults: [number],
columnsOrder: [{
field: string,
type: string
}]
}
}
Type: number
Default value for the padding
on the <td>
and <th>
in rem
.
Type: number
Default number of rows to display inside the table.
Type: number
Default page to display for the table.
sorting: {
field: string,
asc: boolean
}
The field
property must be a string
. Default colums to sort.
The asc
property must be a boolean
. Default way to sort the table.
Type: string
Must be a property of the objects passed has data. The value of this property will be defined as data-primary-key
on the <tr>
element.
Type: string
List of all properties to style the table if you do not define them via a css
file.
Eg: width: 100%; margin-bottom: 5px; margin-top: 5px; border-spacing: 5px;
##### density
density: [{
label: string,
value: number
}]
The label
property must be a string
. This will be the button's label allowing the user to change the table density.
The value
property must be a number
. This value will change the padding
of the table if the button is clicked.
List of all the possible values to display the number of rows for the table.
Eg: showNbResults: [10, 20, 50, 100, 500]
If this array is empty, no column will be rendered inside the table.
columnsOrder: [{
field: string,
type: string
}]
The field
property must be a string
. This is a property of the objects passed as data.
The type
property must be a sting
. This value define if the content is left/right aligned.
The allowed values for type
are:
- 'string'
- Left aligned
- 'number'
- Right aligned
- Sortable Columns
- Display Density
- Pagination
- Row Style
- Add Columns
- Basic Filtering
- Customizable Columns
- Expandable Rows
- Filter Columns
- Hover Actions
- Inline Editing
- Modal
- Multi-Modal
- Quick View
- Row to Details
- Searchable Columns
- Visual Table Summary
- Fixed Header
- Horizontal scroll
- Resizable columns