Getting Started with React Data Table Component: Building Your First Data Table

React Data Table Component is a lightweight, feature-rich table library for React that provides essential table functionality like sorting, filtering, pagination, and row selection with a clean, simple API. It's designed to be easy to use while offering customization options for building data-rich interfaces. This guide walks through setting up and creating your first interactive data table using React Data Table Component with React, from installation to a working implementation. This is part 13 of a series on using React Data Table Component with React.

Prerequisites

Before you begin, make sure you have:

• Node.js version 14.0 or higher installed
• npm, yarn, or pnpm package manager
• A React project (version 16.8 or higher) or create-react-app setup
• Basic knowledge of React hooks (useState)
• Familiarity with JavaScript/TypeScript

Installation

Install React Data Table Component using your preferred package manager:

npm install react-data-table-component

Or with yarn:

yarn add react-data-table-component

Or with pnpm:

pnpm add react-data-table-component

After installation, your package.json should include:

{
  "dependencies": {
    "react-data-table-component": "^7.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

React Data Table Component requires minimal setup. Import the component and optional styles:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import 'react-data-table-component/dist/index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a simple data table component. Create a new file src/DataTable.jsx:

// src/DataTable.jsx
import React from 'react';
import DataTable from 'react-data-table-component';

function DataTable() {
  // Column definitions
  const columns = [
    {
      name: 'ID',
      selector: row => row.id,
      sortable: true,
    },
    {
      name: 'Name',
      selector: row => row.name,
      sortable: true,
    },
    {
      name: 'Email',
      selector: row => row.email,
      sortable: true,
    },
    {
      name: 'Age',
      selector: row => row.age,
      sortable: true,
    },
    {
      name: 'City',
      selector: row => row.city,
      sortable: true,
    },
  ];

  // Sample data
  const data = [
    { id: 1, name: 'John Doe', email: '[e-mail]', age: 28, city: 'New York' },
    { id: 2, name: 'Jane Smith', email: '[e-mail]', age: 32, city: 'London' },
    { id: 3, name: 'Bob Johnson', email: '[e-mail]', age: 45, city: 'Paris' },
    { id: 4, name: 'Alice Williams', email: '[e-mail]', age: 29, city: 'Tokyo' }
  ];

  return (
    <div style={{ padding: '20px' }}>
      <h2>Employee Directory</h2>
      <DataTable
        columns={columns}
        data={data}
        pagination
        highlightOnHover
        striped
      />
    </div>
  );
}

export default DataTable;

Now, update your App.jsx to use the data table:

// src/App.jsx
import React from 'react';
import DataTable from './DataTable';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>React Data Table Example</h1>
      <DataTable />
    </div>
  );
}

export default App;

This creates a fully functional data table with:

• Sortable columns (click column headers)
• Pagination
• Hover highlighting
• Striped rows for better readability
• Clean, modern styling

Understanding the Basics

React Data Table Component uses a column-based configuration where:

• name: Column header text
• selector: Function that extracts the value from each row object
• sortable: Enable sorting for the column (default: false)
• data: Array of row data objects

Key concepts:

• Columns: Define table structure with name, selector, and options
• Data: Array of objects where each object represents a table row
• Selector: Function that maps to a property in your row data
• Props: Enable features like pagination, sorting, selection

Here's a simpler example with just a few columns:

// src/SimpleTable.jsx
import React from 'react';
import DataTable from 'react-data-table-component';

function SimpleTable() {
  const columns = [
    { name: 'ID', selector: row => row.id },
    { name: 'Name', selector: row => row.name },
    { name: 'Value', selector: row => row.value }
  ];

  const data = [
    { id: 1, name: 'Item 1', value: 100 },
    { id: 2, name: 'Item 2', value: 200 },
    { id: 3, name: 'Item 3', value: 300 }
  ];

  return (
    <DataTable
      columns={columns}
      data={data}
    />
  );
}

export default SimpleTable;

Practical Example / Building Something Real

Let's build a product inventory table with more features:

// src/ProductInventory.jsx
import React, { useState } from 'react';
import DataTable from 'react-data-table-component';

function ProductInventory() {
  const [selectedRows, setSelectedRows] = useState([]);
  const [toggleCleared, setToggleCleared] = useState(false);

  const data = [
    { 
      id: 1, 
      name: 'Laptop', 
      category: 'Electronics', 
      price: 999.99, 
      stock: 15, 
      status: 'In Stock' 
    },
    { 
      id: 2, 
      name: 'Mouse', 
      category: 'Electronics', 
      price: 29.99, 
      stock: 8, 
      status: 'Low Stock' 
    },
    { 
      id: 3, 
      name: 'Keyboard', 
      category: 'Electronics', 
      price: 79.99, 
      stock: 12, 
      status: 'In Stock' 
    },
    { 
      id: 4, 
      name: 'Monitor', 
      category: 'Electronics', 
      price: 299.99, 
      stock: 5, 
      status: 'Low Stock' 
    },
    { 
      id: 5, 
      name: 'Desk Chair', 
      category: 'Furniture', 
      price: 199.99, 
      stock: 20, 
      status: 'In Stock' 
    }
  ];

  const columns = [
    {
      name: 'ID',
      selector: row => row.id,
      sortable: true,
      width: '80px'
    },
    {
      name: 'Product Name',
      selector: row => row.name,
      sortable: true,
    },
    {
      name: 'Category',
      selector: row => row.category,
      sortable: true,
    },
    {
      name: 'Price',
      selector: row => row.price,
      sortable: true,
      format: row => `$${row.price.toFixed(2)}`,
      right: true
    },
    {
      name: 'Stock',
      selector: row => row.stock,
      sortable: true,
      cell: row => (
        <span style={{ 
          color: row.stock < 10 ? 'red' : 'green',
          fontWeight: row.stock < 10 ? 'bold' : 'normal'
        }}>
          {row.stock}
        </span>
      ),
      right: true
    },
    {
      name: 'Status',
      selector: row => row.status,
      sortable: true,
      cell: row => (
        <span style={{ 
          padding: '4px 8px',
          borderRadius: '4px',
          backgroundColor: row.status === 'In Stock' ? '#d4edda' : '#fff3cd',
          color: row.status === 'In Stock' ? '#155724' : '#856404'
        }}>
          {row.status}
        </span>
      )
    }
  ];

  const handleChange = ({ selectedRows }) => {
    setSelectedRows(selectedRows);
  };

  const handleClearRows = () => {
    setToggleCleared(!toggleCleared);
    setSelectedRows([]);
  };

  return (
    <div style={{ padding: '20px' }}>
      <div style={{ marginBottom: '20px' }}>
        <h2>Product Inventory</h2>
        {selectedRows.length > 0 && (
          <button
            onClick={handleClearRows}
            style={{
              padding: '8px 16px',
              backgroundColor: '#dc3545',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer'
            }}
          >
            Clear Selection ({selectedRows.length})
          </button>
        )}
      </div>
      <DataTable
        title="Products"
        columns={columns}
        data={data}
        pagination
        paginationPerPage={5}
        paginationRowsPerPageOptions={[5, 10, 20]}
        highlightOnHover
        striped
        selectableRows
        selectableRowsHighlight
        onSelectedRowsChange={handleChange}
        clearSelectedRows={toggleCleared}
        pointerOnHover
      />
    </div>
  );
}

export default ProductInventory;

This example demonstrates:

• Row selection with checkboxes
• Custom cell rendering with conditional styling
• Custom formatting (currency for price)
• Right-aligned numeric columns
• Status badges with color coding
• Clear selection functionality
• Pagination with customizable page sizes

Common Issues / Troubleshooting

1. Table not rendering: Make sure you've imported the CSS file (react-data-table-component/dist/index.css). Without styles, the table may not display correctly.

2. Sorting not working: Ensure you've set sortable: true in your column definitions. The selector function must return a sortable value.

3. Selection not working: Set selectableRows prop to true and handle the onSelectedRowsChange event. Make sure your data objects have a unique identifier.

4. Styling issues: The component comes with default styles. You can customize them by overriding CSS classes or using the customStyles prop.

5. Performance with large datasets: For very large datasets (1000+ rows), consider implementing server-side pagination or using the paginationServer prop.

Next Steps

Now that you have a basic understanding of React Data Table Component:

• Learn about advanced features like custom cell renderers and formatters
• Explore conditional row styling and cell formatting
• Implement server-side data loading and pagination
• Add custom actions and buttons
• Discover expandable rows for nested data
• Check the official repository: https://github.com/jbetancur/react-data-table-component
• Look for part 14 of this series for more advanced topics

Summary

You've successfully set up React Data Table Component in your React application and created your first interactive data table. The component provides a simple, clean API for building data-rich interfaces with essential table functionality like sorting, filtering, pagination, and row selection.

SEO Keywords

react-data-table-component
React data table
react-data-table-component tutorial
React table component
react-data-table-component installation
React data grid
react-data-table-component example
React interactive table
react-data-table-component setup
React table library
react-data-table-component getting started
React data table sorting
React table with pagination
react-data-table-component filtering
React table component tutorial