Data tables are one of the most essential UI components in modern applications. Whether it’s an admin panel, dashboard, CRM system, or e-commerce backend — tables are everywhere.
React makes it easy to create dynamic, searchable, paginated, and sortable data tables using various approaches and libraries.

This blog covers everything you need to know about building tables in React — from basic HTML tables to advanced data grids using libraries like React Data Table Component, Material UI Table, and more.

---

📌 Why Data Tables Matter in React

Data tables allow you to present large amounts of data in a structured, interactive format.

Common Features of Modern Tables

✔ Sorting
✔ Searching / Filtering
✔ Pagination
✔ Editable rows
✔ Row selection
✔ Column customization
✔ Responsive layouts
✔ Export options (CSV / Excel)

React gives you full control to build both simple and enterprise-grade tables.

---

🧩 Approach 1: Building a Simple Table in React

The simplest way is to use HTML <table> tags with .map().

Example: Basic Table

const users = [
  { id: 1, name: "Sagar", email: "sagar@example.com" },
  { id: 2, name: "Vishal", email: "vishal@example.com" },
];

export default function UserTable() {
  return (
    <table border="1" cellPadding="10">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>

      <tbody>
        {users.map(user => (
          <tr key={user.id}>
            <td>{user.id}</td>
            <td>{user.name}</td>
            <td>{user.email}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

✔ Best for small datasets
✔ Good for learning fundamentals

---

⚡ Approach 2: Using React Data Table Component (RDT)

This is one of the most popular libraries for advanced data tables.

📦 Installation

npm install react-data-table-component

---

⭐ Example: Simple Data Table

import DataTable from "react-data-table-component";

const data = [
  { id: 1, title: "Laptop", price: "₹50,000" },
  { id: 2, title: "Phone", price: "₹20,000" },
];

const columns = [
  { name: "ID", selector: row => row.id },
  { name: "Title", selector: row => row.title },
  { name: "Price", selector: row => row.price },
];

export default function ProductTable() {
  return <DataTable title="Product List" columns={columns} data={data} />;
}

---

🎛️ Adding Features with RDT

✔ Pagination

<DataTable pagination />

✔ Sorting

{ name: "Price", selector: row => row.price, sortable: true }

✔ Search / Filter

const filtered = data.filter(item =>
  item.title.toLowerCase().includes(search.toLowerCase())
);

✔ Row Selection

<DataTable selectableRows />

✔ Custom Styles

const customStyles = {
  headRow: { style: { backgroundColor: "#f0f0f0" } },
};

---

🧩 Approach 3: Data Tables with Material UI

Material UI tables are clean, modern, and production-ready.

📦 Install MUI

npm install @mui/material @mui/icons-material

---

⭐ Example: MUI Basic Table

import Table from "@mui/material/Table";
import TableRow from "@mui/material/TableRow";
import TableCell from "@mui/material/TableCell";
import TableHead from "@mui/material/TableHead";
import TableBody from "@mui/material/TableBody";

const rows = [
  { id: 1, name: "Sagar", age: 22 },
  { id: 2, name: "Amit", age: 25 },
];

export default function MuiTable() {
  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableCell>ID</TableCell>
          <TableCell>Name</TableCell>
          <TableCell>Age</TableCell>
        </TableRow>
      </TableHead>

      <TableBody>
        {rows.map(row => (
          <TableRow key={row.id}>
            <TableCell>{row.id}</TableCell>
            <TableCell>{row.name}</TableCell>
            <TableCell>{row.age}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

---

🚀 Advanced Data Grids (Filtering + Sorting + Pagination)

For enterprise-level applications, use:

⭐ React Data Grid Libraries

---

🏆 Example: Material UI DataGrid

import { DataGrid } from "@mui/x-data-grid";

const rows = [
  { id: 1, name: "Sagar", age: 22 },
  { id: 2, name: "Rahul", age: 27 },
];

const columns = [
  { field: "id", headerName: "ID", width: 100 },
  { field: "name", headerName: "Name", width: 150 },
  { field: "age", headerName: "Age", width: 100 }
];

export default function App() {
  return (
    <DataGrid rows={rows} columns={columns} pageSize={5} />
  );
}

🔥 Supports:
✔ Sorting
✔ Filtering
✔ Pagination
✔ Column resize
✔ Checkbox selection
✔ Virtualized rendering

---

⚙️ Building Search + Filter Table (Custom Logic)

const [search, setSearch] = useState("");

const filtered = users.filter(user =>
  user.name.toLowerCase().includes(search.toLowerCase())
);

<input
  type="text"
  placeholder="Search…"
  onChange={e => setSearch(e.target.value)}
/>

{filtered.map(user => (
  <div key={user.id}>{user.name}</div>
))}

---

💡 Best Practices for React Data Tables

✔ Keep rows lightweight
✔ Make table responsive
✔ Avoid using index as key
✔ Use debouncing for search
✔ Virtualize large lists (>5,000 rows)
✔ Use proper libraries for enterprise-level needs

---

🎉 Conclusion

React offers a wide variety of ways to create data tables — from simple HTML tables to powerful grid components.
Whether you're building a small project or a full admin dashboard, React Data Tables help you transform raw data into a clean, interactive UI.

You now know:

✨ How to build tables with .map()
✨ How to use React Data Table Component
✨ How to create Material UI tables
✨ How to add search, sort, pagination
✨ Which grid libraries to choose