better-data-table v0.2.0
better-data-table
Installation
npm i better-data-table
## Usage
const { renderDataTable } = require('better-data-table');
// renderDataTable :: object -> string -> [object] -> Node
renderDataTable(configForTheTable, 'idForDomElement', data);
### Configuration object
{
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
}]
}
}
Property defaultOptions
density
Type: number
Default value for the padding
on the <td>
and <th>
in rem
.
showNbResults
Type: number
Default number of rows to display inside the table.
pagination
Type: number
Default page to display for the table.
sorting
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.
primaryKey
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.
tableStyle
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;
Property allowedOptions
##### 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.
showNbResults
List of all the possible values to display the number of rows for the table.
Eg: showNbResults: [10, 20, 50, 100, 500]
columnsOrder
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
Inspiration
Done
- Sortable Columns
- Display Density
- Pagination
- Row Style
To do
- 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
Later version
- Fixed Header
- Horizontal scroll
- Resizable columns
6 years ago