React Data Table Component
This component is an npm package and can be imported as follows: npm i @kgabard/react-data-table
1. Description
The React Data Table component takes as input an array of objects with the same properties (the data) and displays them in the form of a table where columns represent the properties and rows represent each object in the array.
2. Parameters
2.1 data: DataType[]
The data is an array of objects that constitutes the input data. The DataType is an object whose properties are all of string type.
2.2 columnsWidth: number[]
The columnsWidth is an array of numbers that represent the flex-grow parameter of each column, indicating the relative width per column.
2.3 enableNumberOfEntries?: boolean
The enableNumberOfEntries parameter is optional and controls the display of the dropdown menu allowing selection of the number of entries per page in the table.
2.4 enableSearch?: boolean
The enableSearch parameter is optional and controls the display of the search bar for filtering the table.
2.5 enableSort?: boolean
The enableSort parameter is optional and controls the display of sorting buttons to sort a column in ascending or descending order.
2.6 colors?: { primary: string, secondary: string }
The colors parameter is optional and allows the selection of a primary and secondary color to customize the table.
3. Example of use
Given the following data array:
const employeesList = [
{
firstName: 'Elijah',
lastName: 'Larsen',
startDate: '9/3/2006',
department: 'Marketing',
dateOfBirth: '12/26/1997',
street: 'Chambers Alley',
city: 'Bridgeport',
state: 'Tennessee',
zipCode: '53584',
},
{
firstName: 'John',
lastName: 'Donovan',
startDate: '9/1/2006',
department: 'Sales',
dateOfBirth: '7/17/1976',
street: 'Monroe Tunnel',
city: 'San Antonio',
state: 'Florida',
zipCode: '10494',
},
...
]We can then use the component as follows:
import Table from '@kgabard/react-data-table'
<Table
data={employeesList}
columnsWidth={[1, 1, 0.85, 1, 0.85, 1, 1, 1, 0.7]}
colors={{ primary: 'var(--highlight-primary)', secondary: 'var(--highlight-secondary)' }}
enableNumberOfEntries={true}
enableSearch={true}
enableSort={true}
/>This will display:
