If you are beginner, then i will recommend going through following tutorials to get started with react:
Data table is very useful UI component, It helps in managing the complex set of data in any web or mobile application. A user can easily visualize, compare, sort, filter and scan information using a data table.
React 16+ Table Tutorial with Example
We are going to use react-table package to create a data table in React. We will learn to implement essential features of react-table library that helps to show the data in an organized way.
The react-table package is widely used data table third party package for React framework. This library is extremely light and provides almost all the basic table features which are necessary to display the complex information to the users.
Setting up React Project
Run the following command to install React app using create-react-app.
npx create-react-app react-table-tutorial
Start the app using below command:
npm start
You can view your app on: localhost:3000
Install react-table in React App
We are going to use the react-table plugin to build the data table component in our React app.
Install React Table, run either of the command based on your package manager:
# NPM
$ npm install react-table
# Yarn
$ yarn add react-table
We also need to install the styled-components using the following command:
styled-components
Build Data Table in React with react-table
Once we are done installing react-table in our React table application. Then we need to import the useTable API at the top of the src/App.js component.
import {useTable} from 'react-table';
Next, import the styled-component package, It allows you to write actual CSS code to style your React or React Native components.
npm i styled-components
Add the code in the App.js component to design our data table.
const Styles = styled.div `
table {
width: 100%;
border-spacing: 0;
border: 1px solid black;
tr {
:last-child {
td {
border-bottom: 0;
}
}
}
th,
td {
margin: 0;
padding: 1rem;
border-bottom: 1px solid black;
border-right: 1px solid black;
:last-child {
border-right: 0;
}
}
}
`
Create Table UI
Next, we will define the Table method and pass columns, data value into it. This method helps in rendering the data table UI, we have also declared the state and methods returned via useTable API to create the data table component in React.
function Table({columns, data}) {
const {getTableProps, getTableBodyProps, headerGroups, rows, prepareRow} = useTable({columns, data})
// Render Data Table UI
return (
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup
.headers
.map(column => (
<th {...column.getHeaderProps()}>{column.render('Header')}</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row
.cells
.map(cell => {
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
})}
</tr>
)
})}
</tbody>
</table>
)
}
We must have some data that will be rendered by the react-table package in the React data table component.
const data = [
{
name: 'Leanne Graham',
email: 'Sincere@april.biz',
age: 28,
status: 'Active'
},
{
name: 'Ervin Howell',
email: 'Shanna@melissa.tv',
age: 35,
status: 'Active'
},
{
name: 'Clementine Bauch',
email: 'Nathan@yesenia.net',
age: 33,
status: 'Inactive'
},
{
name: 'Patricia Lebsack',
email: 'Julianne@kory.org',
age: 25,
status: 'Active'
},
{
name: 'Kamren',
email: 'Hettinger@annie.ca',
age: 42,
status: 'Active'
},
{
name: 'Dennis Schulist',
email: 'Dach@jasper.info',
age: 34,
status: 'Inactive'
},
{
name: 'Kurtis Weissnat',
email: 'Hoeger@billy.biz',
age: 44,
status: 'Active'
},
{
name: 'Maxime_Nienow',
email: 'Sherwood@rosamond.me',
age: 26,
status: 'Active'
},
{
name: 'Glenna Reichert',
email: 'McDermott@dana.io',
age: 30,
status: 'Inactive'
},
]
We must define the column directive and ad the column data, add the following code in the App.js file.
The ReactTable will render the data array by mapping the JSON data key associated with column accessor value. For example, our column headers values in table are Name, Email, Age, and Status.
const columns = [
{
Header: 'Name',
accessor: 'name'
}, {
Header: 'Email',
accessor: 'email'
}, {
Header: 'Age',
accessor: 'age'
}, {
Header: 'Status',
accessor: 'status'
}
]
Inside the return method define the Styles attribute to style the table UI, then set the Table attribute along with table properties to render the JSON data in the React table.
return (
<Styles>
<Table
data={data}
columns={columns}
/>
</Styles>
)
Above code will successfully display the rows of data along with the data values as column header.
Here is how the final App component looks in the src/App.js
file:
import React from 'react';
import {useTable} from 'react-table'
import styled from 'styled-components'
const Styles = styled.div `
table {
width: 100%;
border-spacing: 0;
border: 1px solid black;
tr {
:last-child {
td {
border-bottom: 0;
}
}
}
th,
td {
margin: 0;
padding: 1rem;
border-bottom: 1px solid black;
border-right: 1px solid black;
:last-child {
border-right: 0;
}
}
}
`
function Table({columns, data}) {
const {getTableProps, getTableBodyProps, headerGroups, rows, prepareRow} = useTable({columns, data})
// Render Data Table UI
return (
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup
.headers
.map(column => (
<th {...column.getHeaderProps()}>{column.render('Header')}</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row
.cells
.map(cell => {
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
})}
</tr>
)
})}
</tbody>
</table>
)
}
function App() {
const data = [
{
name: 'Leanne Graham',
email: 'Sincere@april.biz',
age: 28,
status: 'Active'
},
{
name: 'Ervin Howell',
email: 'Shanna@melissa.tv',
age: 35,
status: 'Active'
},
{
name: 'Clementine Bauch',
email: 'Nathan@yesenia.net',
age: 33,
status: 'Inactive'
},
{
name: 'Patricia Lebsack',
email: 'Julianne@kory.org',
age: 25,
status: 'Active'
},
{
name: 'Kamren',
email: 'Hettinger@annie.ca',
age: 42,
status: 'Active'
},
{
name: 'Dennis Schulist',
email: 'Dach@jasper.info',
age: 34,
status: 'Inactive'
},
{
name: 'Kurtis Weissnat',
email: 'Hoeger@billy.biz',
age: 44,
status: 'Active'
},
{
name: 'Maxime_Nienow',
email: 'Sherwood@rosamond.me',
age: 26,
status: 'Active'
},
{
name: 'Glenna Reichert',
email: 'McDermott@dana.io',
age: 30,
status: 'Inactive'
},
]
const columns = [
{
Header: 'Name',
accessor: 'name'
}, {
Header: 'Email',
accessor: 'email'
}, {
Header: 'Age',
accessor: 'age'
}, {
Header: 'Status',
accessor: 'status'
}
]
return (
<Styles>
<Table
data={data}
columns={columns}
/>
</Styles>
)
}
export default App