The table-oc plugin
This project contains the code for plugin that help to build quickly a cutomisable Table React component.
It has been coded in the scope of the OpenClassrooms cursus.
Description
This plugin allows you to quickly setup a react component to displays datas as a table.
This table is customisable:
- custom header's name
- infinite scroll or pagination
- column sorting
- number of items by page
- direct search among datas
- etc
Start
Prerequisite
- nodeJS: >v16.14.2
Installation
- Run
npm install plugin-table-oc
into your project folder. - Import
TableIndex
into you React Application
Use
Import and use directly:
import TableIndex from 'plugin-table-oc'
function App() {
const headers = {
id: 'id',
name : 'Name',
zipCode: 'ZIP'
}
const datas = [
{
id: 0,
name: 'Jean',
zipCode: '78521',
},
{...},
...
]
return (
<main className="App">
<TableIndex headers={headers} datas={datas} />
</main>
Props
Obligatory
headers
headers
is an object that make the connection between data keys and columns header value. Only the keys present into the headers object will be shown in the table.
The following example means that data's ids will be set in the column named 'id', the data's names in the 'Name' column and the data's zipCodes in the 'ZIP' column.
const headers = {
id: 'id',
name : 'Name',
zipCode: 'ZIP'
}
datas
datas
is an array of object.
Datas's objects can only contains strings.
Each object have an unique id named id
Optionnal
scroll
Default is false
. It means that the datas's table will be paginated.
Is set to true
, the table will show all the datas on scroll.
itemsByPageArr
It's only available if scroll = false
.
It defines the possible number of items displayed in the table. The user can change the number by chosing among one contained in the given array.
Default is [5, 20, 50]
.
An other array of integer can ben set.
defaultItemsByPage
It defines the default number of items shown in one page of the table.
If scroll = true
, it's also the number of items added to the table when datas are added into it.
sort
It defines if the user can sort the table by clicking the column's header.
Default is true
.
defaultSort
It defines the default sorting of the table at the 1st loading of the table.
The name of a column can be passed trough that prop to change the sorted column.
If defaultSort = ''
, no default sort.
search
Default is true
.
When activate, an input field will appear to make search possible.
It search in all the table.
showId
Default is false
.
If set to true, the object id will be visible in the table.
The id field have to be set into headers
object to be diplayed.