This component is an npm package and can be imported as follows: `npm i @kgabard/react-data-table`
npm install @kgabard/react-data-tablenpm i @kgabard/react-data-tableThe 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.
The data is an array of objects that constitutes the input data. The DataType is an object whose properties are all of string type.
The columnsWidth is an array of numbers that represent the flex-grow parameter of each column, indicating the relative width per column.
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.
The enableSearch parameter is optional and controls the display of the search bar for filtering the table.
The enableSort parameter is optional and controls the display of sorting buttons to sort a column in ascending or descending order.
The colors parameter is optional and allows the selection of a primary and secondary color to customize the table.
Given the following data array:
``js`
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:
`jsx
import Table from '@kgabard/react-data-table'
This will display: