react-data-table-component

What is react-data-table-component?

The react-data-table-component package is a highly customizable and easy-to-use data table component for React applications. It provides a range of features including sorting, pagination, selectable rows, expandable rows, and custom styling.

What are react-data-table-component's main functionalities?

Basic Table

This code demonstrates how to create a basic data table with sortable columns using react-data-table-component.

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

const data = [{ id: 1, title: 'Conan the Barbarian', year: '1982' }, { id: 2, title: 'The Terminator', year: '1984' }];

const columns = [
  { name: 'Title', selector: row => row.title, sortable: true },
  { name: 'Year', selector: row => row.year, sortable: true }
];

<DataTable columns={columns} data={data} />;

Pagination

This code demonstrates how to enable pagination in the data table.

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

const data = [...Array(100).keys()].map(i => ({ id: i, title: `Title ${i}`, year: 2000 + i }));

const columns = [
  { name: 'Title', selector: row => row.title, sortable: true },
  { name: 'Year', selector: row => row.year, sortable: true }
];

<DataTable columns={columns} data={data} pagination />;

Selectable Rows

This code demonstrates how to make rows selectable in the data table.

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

const data = [{ id: 1, title: 'Conan the Barbarian', year: '1982' }, { id: 2, title: 'The Terminator', year: '1984' }];

const columns = [
  { name: 'Title', selector: row => row.title, sortable: true },
  { name: 'Year', selector: row => row.year, sortable: true }
];

<DataTable columns={columns} data={data} selectableRows />;

Expandable Rows

This code demonstrates how to add expandable rows to the data table.

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

const data = [{ id: 1, title: 'Conan the Barbarian', year: '1982', description: 'A movie about a barbarian.' }, { id: 2, title: 'The Terminator', year: '1984', description: 'A movie about a terminator.' }];

const columns = [
  { name: 'Title', selector: row => row.title, sortable: true },
  { name: 'Year', selector: row => row.year, sortable: true }
];

const ExpandedComponent = ({ data }) => <pre>{JSON.stringify(data, null, 2)}</pre>;

<DataTable columns={columns} data={data} expandableRows expandableRowsComponent={ExpandedComponent} />;

Custom Styling

This code demonstrates how to apply custom styles to the data table.

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

const data = [{ id: 1, title: 'Conan the Barbarian', year: '1982' }, { id: 2, title: 'The Terminator', year: '1984' }];

const columns = [
  { name: 'Title', selector: row => row.title, sortable: true },
  { name: 'Year', selector: row => row.year, sortable: true }
];

const customStyles = {
  rows: {
    style: {
      minHeight: '72px', // override the row height
    },
  },
  headCells: {
    style: {
      paddingLeft: '8px', // override the cell padding for head cells
      paddingRight: '8px',
    },
  },
  cells: {
    style: {
      paddingLeft: '8px', // override the cell padding for data cells
      paddingRight: '8px',
    },
  },
};

<DataTable columns={columns} data={data} customStyles={customStyles} />;

Other packages similar to react-data-table-component

react-table

react-table is a lightweight, fast, and extendable data grid built for React. It provides a hook-based API and is highly customizable. Compared to react-data-table-component, react-table offers more flexibility and control over the table's behavior and appearance, but it requires more setup and configuration.

material-table

material-table is a data table component built on top of Material-UI. It provides a rich set of features out of the box, including sorting, filtering, pagination, and inline editing. Compared to react-data-table-component, material-table offers a more integrated experience with Material-UI and additional features like inline editing, but it may be heavier due to its dependency on Material-UI.

ag-grid-react

ag-grid-react is a feature-rich data grid component for React applications. It offers a wide range of features including sorting, filtering, pagination, and complex data manipulation. Compared to react-data-table-component, ag-grid-react is more powerful and suitable for complex use cases, but it has a steeper learning curve and may be overkill for simpler applications.

README

React Data Table Component

Creating yet another React table library came out of necessity while developing a web application for a growing startup. I discovered that while there are some great table libraries out there, some required heavy customization, were missing out of the box features such as built in sorting and pagination, or required understanding the atomic structure of html tables.

If you want to achieve balance with the force and want a simple but flexible table library give React Data Table Component a chance. If you require an Excel clone, then this is not the React table library you are looking for 👋

Key Features

• Declarative configuration
• Built-in and configurable:
  • Sorting
  • Selectable Rows
  • Expandable Rows
  • Pagination
• Themeable/Customizable
• Accessibility
• Responsive (via x-scroll/flex)

Documentation Website

The documentation contains information about installation, usage and contributions.

https://react-data-table-component.netlify.app

Supporting React Data Table Component

If you would like to support the project financially, visit our campaign on OpenCollective. Your contributions help accelerate the development of React Data Table Component!

Contributors