Table in ReactJS

by

React Table

To store and display data in a structured format, an arrangement is created that organizes information into rows and columns. This arrangement is called a table.

Features of React Table:

  • Lightweight at 11kb and only needs 2kb more for styles.
  • Fully customizable with JSX, templates, states, styles, and callbacks.
  • Fully controllable via optional props and callbacks.
  • Includes client-side and server-side pagination.
  • Includes filters.
  • Pivoting & Aggregation.
  • Minimal design & easily themeable.

Installation:
To create a React app. Command:

$ npx create-react-app myApp

To install react-table. Command:

$ npm install react-table

To import the react-table into the react component, add the following snippet to the src/App.js file.

import ReactTable from "react-table";

To render data using react-table.

const data = [{
msg: 'Hello',
num: 1
},{
msg: 'Hey',
num: 2
},{
msg: 'Hi',
num: 3
},{
msg: 'Bye',
num: 4
},{
msg: 'Welcome',
num: 5
},{
msg: 'Thanks',
num: 6
}]

To specify the column info with column attributes.

const columns = [{
Header: 'Message',
accessor: 'msg'
},{
Header: 'Number',
accessor: 'num'
}]

To bind this data with react-table, inside the render method and then return the react-table.

return (
<div>
<ReactTable
data={data}
columns={columns}
defaultPageSize = {2}
pageSizeOptions = {[2,4, 6]}
/>
</div>
)

Ultimately the src/App.js will look similar to the below code.
src/App.js:

import React, { Component } from 'react';
import ReactTable from "react-table";
import "react-table/react-table.css";
class App extends Component {
render() {
const data = [{
msg: 'Hello',
num: 1
},{
msg: 'Hey',
num: 2
},{
msg: 'Hi',
num: 3
},{
msg: 'Bye',
num: 4
},{
msg: 'Welcome',
num: 5
},{
msg: 'Thanks',
num: 6
}]
const columns = [{
Header: 'Message',
accessor: 'msg'
},{
Header: 'Number',
accessor: 'num'
}] return (
<div>
<ReactTable
data={data}
columns={columns}
defaultPageSize = {2}
pageSizeOptions = {[2,4, 6]}
/>
</div>
)
}
}
export default App;