react-module-regular
v0.0.0
Published
A React component that returns a table with a search input, sortable columns and customizable results per page.
Downloads
1
Maintainers
Readme
paginated-react-table
A React component that returns a table with a search input, sortable columns and customizable results per page.
Installation
Install my-project with npm
npm install paginated-react-table
Usage/Examples
import PaginatedReactTable from 'paginated-react-table'
const tableTitle = "Current Employees"
const headersArray = [
'First Name',
'Last Name',
'Start Date',
'Department',
'Date of Birth',
'Street',
'City',
'State',
'Zip Code'
]
const dataArray = [
{
firstName: 'Larry',
lastName: 'Anderson',
startDate: '05/01/2020',
department: 'Human Resources',
dateOfBirth: '12/03/2001',
street: '4190 Woodside Circle',
city: 'Quincy',
state: 'FL',
zipCode: '32351'
},
{
firstName: 'Simon',
lastName: 'Hornbeck',
startDate: '01/01/2018',
department: 'Legal',
dateOfBirth: '07/16/1999',
street: '3171 Cerullo Road',
city: 'Louisville',
state: 'KY',
zipCode: '40244'
},
{
firstName: 'Ashley',
lastName: 'Jones',
startDate: '09/14/2016',
department: 'Sales',
dateOfBirth: '09/03/1999',
street: '3931 Saints Alley',
city: 'Tampa',
state: 'FL',
zipCode: '33602'
}
]
/*
N.B. : If you want to display a table with no data at initialization,
you can initialize with `dataArray = null` :
It will display 'No data available in table' inside the tbody,
and will disable the options (buttons, searchbar, select,...).
*/
const App = () => {
return (
<PaginatedReactTable
tableTitle={tableTitle}
headersArray={headersArray}
dataArray={dataArray}
/>
)
}
export default App
Props
| Prop | Type | Description |
| :-------- | :------- | :------------------------- |
| tableTitle
| string
| Required. Title of the table |
| headersArray
| array of str
| Required. Headers of the table |
| dataArray
| array of obj
| Required. Data of the table. If you don't have any data yet, initialise the array with null
. |
Node version
This package requires Node.js version 16.16.0 or later.