In our previous React tutorial, we have explained how to Setup TinyMCE Editor in React. In this tutorial, you will learn to implement Datatable in React.
Datatable is a React component that allow to create user friendly dynamic responsive table with some advance features such as pagination, sorting, ordering, searching and many more to the HTML tables with minimal effort.
We will use react react-table component to create lighweight datatable in React application.
So let’s start implementing datatable in React application.
Prerequisites
React Application Setup
First we will create our react application react-datatable-app using below command.
npx create-react-app react-datatable-app
we will move into our newly created application.
$ cd react-datatable-app
Now we will run our react application using below command.
$ npm start
Install React Table Pakcage
We will install react-table package to create react table. We will use following command to install react table package.
$ npm install react-table
We also need to install styled-components for styling table. We will use following command to install this.
$ npm i styled-components
After installing styled-components, we will add following code to the App.js.
const Styles = styled.div`
padding: 1rem;
table {
border-spacing: 0;
border: 1px solid black;
tr {
:last-child {
td {
border-bottom: 0;
}
}
}
th,
td {
margin: 0;
padding: 0.5rem;
border-bottom: 1px solid black;
border-right: 1px solid black;
:last-child {
border-right: 0;
}
}
}
`
Create Table Design
We will define the Tablemethod and pass colouns and data values to render the data in table.
function Table({ columns, data }) {
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = useTable(
{
columns,
data,
},
useSortBy
)
const firstPageRows = rows.slice(0, 20)
return (
<>
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps(column.getSortByToggleProps())}>
{column.render('Header')}
<span>
{column.isSorted
? column.isSortedDesc
? ' 🔽'
: ' 🔼'
: ''}
</span>
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{firstPageRows.map(
(row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return (
<td {...cell.getCellProps()}>{cell.render('Cell')}</td>
)
})}
</tr>
)}
)}
</tbody>
</table>
</>
)
}
Display Data in Table
The react table needs data to render as JSON data, so we will have json data to render in table. Then we will render it using Table attribute.
function App() {
const data = [
{
name: 'Jhon Smith',
email: 'smith@coderszine.com',
age: 28,
status: 'Active'
},
{
name: 'William',
email: 'william@coderszine.com',
age: 35,
status: 'Active'
},
{
name: 'Nathan Bauch',
email: 'nathan@coderszine.com',
age: 33,
status: 'Inactive'
},
{
name: 'Henry',
email: 'henry@coderszine.com',
age: 25,
status: 'Active'
},
{
name: 'Kamren',
email: 'kamren@coderszine.com',
age: 42,
status: 'Active'
},
{
name: 'Dennis',
email: 'danis@coderszine.com',
age: 34,
status: 'Inactive'
},
{
name: 'Peter',
email: 'peter@coderszine.com',
age: 44,
status: 'Active'
},
{
name: 'Andy',
email: 'andy@coderszine.com',
age: 26,
status: 'Active'
},
{
name: 'Jhony Rhodes',
email: 'rhodes@coderszine.com',
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 columns={columns} data={data} />
</Styles>
)
}
Complete Code To Load Data in Table
Here is the complete code to load JSON data into React Table. Just copy and paste code into App.js file.
import React from 'react'
import styled from 'styled-components'
import { useTable, useSortBy } from 'react-table'
const Styles = styled.div`
padding: 1rem;
table {
border-spacing: 0;
border: 1px solid black;
tr {
:last-child {
td {
border-bottom: 0;
}
}
}
th,
td {
margin: 0;
padding: 0.5rem;
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,
},
useSortBy
)
const firstPageRows = rows.slice(0, 20)
return (
<>
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps(column.getSortByToggleProps())}>
{column.render('Header')}
<span>
{column.isSorted
? column.isSortedDesc
? ' 🔽'
: ' 🔼'
: ''}
</span>
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{firstPageRows.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: 'Jhon Smith',
email: 'smith@coderszine.com',
age: 28,
status: 'Active'
},
{
name: 'William',
email: 'william@coderszine.com',
age: 35,
status: 'Active'
},
{
name: 'Nathan Bauch',
email: 'nathan@coderszine.com',
age: 33,
status: 'Inactive'
},
{
name: 'Henry',
email: 'henry@coderszine.com',
age: 25,
status: 'Active'
},
{
name: 'Kamren',
email: 'kamren@coderszine.com',
age: 42,
status: 'Active'
},
{
name: 'Dennis',
email: 'danis@coderszine.com',
age: 34,
status: 'Inactive'
},
{
name: 'Peter',
email: 'peter@coderszine.com',
age: 44,
status: 'Active'
},
{
name: 'Andy',
email: 'andy@coderszine.com',
age: 26,
status: 'Active'
},
{
name: 'Jhony Rhodes',
email: 'rhodes@coderszine.com',
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 columns={columns} data={data} />
</Styles>
)
}
export default App