1.1.1 • Published 2 years ago
interactive-react-table v1.1.1
React Table
A react component to easily create an interactive table.
Features
- Column sorting
- Data search
- Pagination
- Entries counter
- Responsive design
Installation
Prerequisites: React
npm i interactive-react-table
Basic Usage Example
Import the component:
import { default as ReactTable } from 'interactive-react-table';
Set some data:
const data = [
{
firstName: 'Bruce',
lastName: 'Wayne',
birthdate: '1939-03-30',
city: 'Gotham City'
},
{
firstName: 'Peter',
lastName: 'Parker',
birthdate: '1962-08-15',
city: 'New York'
},
{
firstName: 'Clark',
lastName: 'Kent',
birthdate: '1939-06-12',
city: 'Metropolis'
}
]
Config headers:
const headers = [
{
name: 'First Name',
key: 'firstName'
},
{
name: 'Last Name',
key: 'lastName'
},
{
name: 'Date of birth',
key: 'birthdate'
},
{
name: 'City',
key: 'city'
}
]
Use component:
<ReactTable data={data} headers={headers} />
Render:
Props
data: {Array<Objects>}
- Required
- The data you want to display in the table.
- To ensure a good behavior, make sure that each object have the same properties structure.
headers : {Array<Objects>}
- Required
- Handle table columns headers.
- Each object must contain two properties:
- name : The name to display in the column header
- key : A string which refers to the corresponding property name.
- The items in this array must follow the same order as the data objects properties.
pageSizeOptions : {Array<Numbers>}
- Optional
- Default: 10, 25, 50
- Providing options to configure the number of rows per page.
defaultSorting : {Object}
- Optional
- Default: undefined (No sorting)
- Provide default sorting settings
- The object must contains two properties:
- property : The property you want to sort by
- order : The sorting order, must be 'ascending' or 'descending'
- Example : { property : "firstName", order: "ascending" }
displayEntries : {Boolean}
- Optional
- Default: true
- Disable entries displayer feature by setting it to false
allowSearch : {Boolean}
- Optional
- Default: true
- Disable search feature by setting it to false
selectPageSize : {Boolean}
- Optional
- Default: true
- Disable page size selector feature by setting it to false
Customize Style
Just write some styles for class .mainContainer
. Your styles will be prioritized over library styles, then target the following selectors to customize what you want.
Header
- Container:
.tableHeader
- Select page size section:
.selectPageSize
- Search section:
.search
- Select page size section:
Table
- Container:
.table
- Table headers (th):
.table-th
You can target a specific header by index using:.table-th-1
,.table-th-2
,.table-th-3
, etc. - Table headers content:
.table-th-content
- Sort Icons:
.table-th-sortIcons
- Active sort icon:
.sortIcon--active
- Table rows (tr):
.table-tr
You can target a specific row by index using:.table-tr-1
,.table-tr-2
,.table-tr-3
, etc. - Table data cells (td):
.table-td
- Table headers (th):
Footer
- Container:
.tableFooter
- Entries displayer:
.entriesDisplayer
- Pagination section:
.pagination
- Pagination buttons:
.pagination button
- Pagination current page button:
.pagination button.currentPage
- Entries displayer:
Example:
See full documentation here
Hope it helps !