I was working on a React project where I needed to display a large dataset in a clean and user-friendly way. At first, I thought about building a custom table from scratch, but I quickly realized it would be time-consuming.
That’s when I started using react-data-table-component (RDT). It’s lightweight, flexible, and makes table creation in React a lot easier.
In this tutorial, I’ll share how I use this library to create tables, add features like sorting and pagination, and customize them for real-world use cases.
What is react-data-table-component?
react-data-table-component is a popular open-source React library that helps you build interactive tables without writing a lot of boilerplate code.
It comes with built-in features like:
- Sorting
- Pagination
- Selectable rows
- Custom styling
- Responsive design
This makes it perfect when you’re working with datasets such as customer lists, employee records, or sales reports.
Install react-data-table-component
The first step is to install the library. In your React project folder, run:
npm install react-data-table-componentOr if you’re using Yarn:
yarn add react-data-table-componentOnce installed, you can start using it right away.
Method 1 – Create a Basic Table
Let’s start with a simple example. Imagine I’m building a dashboard for a U.S.-based retail company that tracks employee sales performance.
Here’s how I create a basic table:
import React from "react";
import DataTable from "react-data-table-component";
const data = [
{ id: 1, name: "John Smith", sales: 120, location: "New York" },
{ id: 2, name: "Emily Johnson", sales: 150, location: "California" },
{ id: 3, name: "Michael Brown", sales: 95, location: "Texas" },
];
const columns = [
{ name: "ID", selector: row => row.id, sortable: true },
{ name: "Name", selector: row => row.name, sortable: true },
{ name: "Sales", selector: row => row.sales, sortable: true },
{ name: "Location", selector: row => row.location },
];
function EmployeeTable() {
return <DataTable title="Employee Sales Report" columns={columns} data={data} />;
}
export default EmployeeTable;I executed the above example code and added the screenshot below.
That’s it! With just a few lines of code, I now have a table that displays employee sales data, and it’s already sortable.
Method 2 – Add Pagination
When working with larger datasets, pagination becomes essential.
Here’s how I add it:
<DataTable
title="Employee Sales Report"
columns={columns}
data={data}
pagination
/>I executed the above example code and added the screenshot below.
Adding the pagination prop automatically enables page navigation.
Method 3 – Custom Styling
I often need to match the table design with my company’s branding.
Here’s how I apply custom styling:
const customStyles = {
headCells: {
style: {
backgroundColor: "#f4f4f4",
fontWeight: "bold",
},
},
rows: {
style: {
minHeight: "50px",
},
},
};
<DataTable
title="Employee Sales Report"
columns={columns}
data={data}
pagination
customStyles={customStyles}
/>I executed the above example code and added the screenshot below.
Now the table looks more professional and fits better with the UI.
Method 4 – Selectable Rows
Sometimes I need to allow users to select rows for bulk actions (like deleting multiple employees).
This is how I enable it:
<DataTable
title="Employee Sales Report"
columns={columns}
data={data}
selectableRows
pagination
/>With selectableRows, checkboxes appear automatically.
Method 5 – Filter and Search
While react-data-table-component doesn’t have a built-in search, I usually add a simple input box to filter data.
import React, { useState } from "react";
import DataTable from "react-data-table-component";
function EmployeeTable() {
const [filter, setFilter] = useState("");
const data = [
{ id: 1, name: "John Smith", sales: 120, location: "New York" },
{ id: 2, name: "Emily Johnson", sales: 150, location: "California" },
{ id: 3, name: "Michael Brown", sales: 95, location: "Texas" },
];
const columns = [
{ name: "ID", selector: row => row.id, sortable: true },
{ name: "Name", selector: row => row.name, sortable: true },
{ name: "Sales", selector: row => row.sales, sortable: true },
{ name: "Location", selector: row => row.location },
];
const filteredData = data.filter(item =>
item.name.toLowerCase().includes(filter.toLowerCase())
);
return (
<div>
<input
type="text"
placeholder="Search by name"
value={filter}
onChange={e => setFilter(e.target.value)}
style={{ marginBottom: "10px", padding: "5px" }}
/>
<DataTable
title="Employee Sales Report"
columns={columns}
data={filteredData}
pagination
/>
</div>
);
}
export default EmployeeTable;Now users can search employees by name.
Method 6 – Responsive Tables
In the U.S., most employees and managers check dashboards on mobile devices. That’s why I always make sure my tables are responsive.
By default, react-data-table-component is responsive, but I sometimes add custom column widths and overflow handling to improve readability.
const columns = [
{ name: "ID", selector: row => row.id, sortable: true, width: "80px" },
{ name: "Name", selector: row => row.name, wrap: true },
{ name: "Sales", selector: row => row.sales, right: true },
{ name: "Location", selector: row => row.location },
];This ensures the table looks good on both desktops and smartphones.
When Should You Use react-data-table-component?
From my experience, this library is best when:
- You need a quick table creation with minimal setup.
- Your dataset is medium-sized (a few hundred to a few thousand rows).
- You want built-in features like sorting, pagination, and selection.
If you’re dealing with very large datasets (hundreds of thousands of rows), you might need virtualization libraries like react-virtualized.
I’ve used react-data-table-component in several projects, from employee dashboards to customer management tools. It saves me a lot of time compared to building tables from scratch, and it’s flexible enough for most real-world use cases.
If you’re building a React app and need tables that are both functional and customizable, I highly recommend giving this library a try.
You may also read:
- How to Handle Events in React JS
- State in React JS
- Props in React JS
- Which is the Best React Component Library?
Bijay Kumar is an experienced Python and AI professional who enjoys helping developers learn modern technologies through practical tutorials and examples. His expertise includes Python development, Machine Learning, Artificial Intelligence, automation, and data analysis using libraries like Pandas, NumPy, TensorFlow, Matplotlib, SciPy, and Scikit-Learn. At PythonGuides.com, he shares in-depth guides designed for both beginners and experienced developers. More about us.
