📋 Customizable, Virtualized Table Component For React.js
npm install rv-table
Install the package using NPM:
npm install --save RVTable
You must also install the class properties plugin for babel if you haven't already by running:
npm install --save-dev @babel/plugin-proposal-class-properties
- First, import the module as a dependancy in your react project:
import RVTable from 'RVTable'
- Pass data to the table using the passedData prop. This must be an array of objects, with key names that will be referenced later in the columns.
- The rest of the config options are passed as an object to the config prop.
- Columns are specified with:
``
{
displayName: String : The name that shows on the visual table
fieldName: String : The field in passedData
}
`
- An optional value property can be added. This must be a function with an argument to take in the data for the row. An example would be:
`
value: ( rowData ) => {
const name = rowData.name );
return My Name Is ${ name };
}
`
${ name } references the data for that row.
- Optional width property in the columns can be set in fr, px or %. If not a default of "1fr" is set.
- A sorting property can be added, which will allow the column to be sorted via clicking on the column header. More on sorting can be found later in the readme.
- The required property can be added to any column using required: true, which will cause the table to throw an error if every row doesn't include the data.
- The virtualization property sets the height of the rows and the table, is passed as a number.
- Debug mode can be turned on in the config using degbugMode: true, which will console log any missing data that is not required.
- A selection box can also be added via selectionBox: true. This will set the state of the row in the table selected = true, which you can extend upon for more features.
` passedData={ [ { user_id: "1", user_name: "Mac", email_address: "test@123.com", }, { user_id: "2", user_name: "Dennis", email_address: "test@123.com", }, { user_id: "3", user_name: "Dee", email_address: "test@123.com", }, { user_id: "4", user_name: "Charlie", email_address: "test@123.com", }, { user_id: "4", user_name: "Frank", email_address: "test@123.com", }, ] } config={{ columns: [ { displayName: "ID", fieldName: "user_id", required: true, }, { displayName: "Name", fieldName: "user_name", value: ( rowData ) => { const name = rowData.user_name; return ;
},
},
{
displayName: "Email",
fieldName: "email_address",
},
],
debugmode: true,
selectionBox: true,
virtualization: {
tableHeight: 500,
rowHeight: 50,
},
}}
/>
passedData={
[
{
user_id: "1",
user_name: "Mac",
email_address: "test@123.com",
},
{
user_id: "2",
user_name: "Dennis",
email_address: "test@123.com",
},
{
user_id: "3",
user_name: "Dee",
email_address: "test@123.com",
},
{
user_id: "4",
user_name: "Charlie",
email_address: "test@123.com",
},
{
user_id: "4",
user_name: "Frank",
email_address: "test@123.com",
},
]
}
config={{
columns: [
{
displayName: "ID",
fieldName: "user_id",
required: true,
},
{
displayName: "Name",
fieldName: "user_name",
value: ( rowData ) => {
const name = rowData.user_name;
return Hello My Name Is ${ name };
},
},
{
displayName: "Email",
fieldName: "email_address",
},
],
debugmode: true,
selectionBox: true,
virtualization: {
tableHeight: 500,
rowHeight: 50,
},
}}
/>
`
By default, the table renders +5 rows on each side of the displayed data to ensure smooth scrolling. The table also lazy loads the fields in view, then half of the table, then the whole table to ensure high performance.
By adding the sorting property to a column config, RV Table will append a sorting icon to the header which can be toggled by clicking on the header.
There are three modes for sorting: Default, Function & Template.
- Passing any non-falsy value to the sorting property will allow you to sort with the default mode, which converts cells to strings and sorts them using the javascript .sort() function.
- Passing a function allows you to define your own comparison algorithm. The function has access to (rowA[propertyToSort], rowB[propertyToSort], rowA, rowB). Your comparison algorithm must have at least two args & return 0 1 or -1
- Passing a string allows you to check the templating database for a sorting algorithm.
- A div (which can be styled using pseudo elements) is appended before headers that have been sorted. The CSS class depends on the state.
`
.rv-table-indicator__ascending
.rv-table-indicator__descending
.rv-table-indicator__none
Current templates:
- Date (sorting algorithm for dates)
- Default (default sorting algorithm)
The sorting will fallback to the default algorithm if the passed sorting function is invalid, or if the sorting template can't be found in RV Table's store & an error message will be displayed
- RVTable fills 100% of the width of its parent container - therefore a wrapper is recommended around the table to control the width.
- RVTable's styling is structured using BEM methodology, available selectors are:
`
.table
.table__header
.table__inner (Good for scrollbar styling)
.table__grid
.table__row
.table__cell
- It is recommended not to specify a field value or required attribute on any row that uses value, as it may result in unexpected behaviour. It shouldn't be necessary to do this, as the cell will take the data for that row & any error handling can be done in the function you pass the cell.
- The test suite (Jest) will uses data-testid` to select elements for testing.