How to use React-Table

React-Table enables your dynamic data looks beautiful and makes it more intuitive to read. By using React-Table ,we are able to arrange our data in rows and columns. One such pre-built open source npm package is react-table, which is lightweight, fast and is used for making extensible grids for react. React-table comes out with features such as sorting, filtering, row selection, column ordering and many more which makes it unique. For more details refer to this documentation.(https://react-table.tanstack.com/docs/overview).

1{ const coloumn = [
2      {
3        Header: 'moiz',
4        accessor: 'moiz',
5        Footer: ''
6      },
7
8      {
9        Header: 'hassan',
10        accessor: 'hassan',
11        Footer: ''
12      },
13      {
14        Header: 'name',
15        accessor: 'name',
16        Footer: ''
17      },
18      {
19        Header: 'name ',
20        accessor: 'name',
21        Footer: ''
22      },
23      ]
24
25}

React-table works in very precise way. It demands for header and accessor as column definitions. We have our main react table component which we can import in any other component and use accordingly. We must pass table data and column data in table component and other properties that we need according to our use case scenario. React-Table data needs to be in array format in the way shown below:

Events like _OnRowClick and _OnCellClick are not necessary in React-Table.

1{{this.state.showTables?
2<Table             
3columns={coloumn}
4data={this.state.MacroData}
5
6// handleRowClicked={() => {this.MoveDown()}}
7fixedHeaderFooter={true}
8rowSelection={false}
9footer={false}
10minWidth={'100%'}
11/>
12:null}}

After we have passed all the required properties to the table component now it will receive the properties and display the data.

Customization and Configuration options

React-table provides the end user a large variety of customizations to add more functionality. Here we will see how to customize react-table in different manner, such as different scenarios in row customizations and column customizations.