Simple React DataTable

Hi everyone, this time I want to show you a simple component that I made in React JS to visualize and manage your data in a table.

It’s inspired by the popular JQuery library DataTables

Features

The next are the features that I have added so far.

Set title of columns.
Set rows per page.
Filter the data.
Pagination control.
On row click callback.

Installation.

I share the component thru Bit so you can easily install it with npm.

First, register the Bit repo to npm:

npm config set @bit:registry https://node.bit.dev

Now install it:

npm i @bit/adeoy.utils.data-table

The component depends on Reactstrap and Bootstrap Styles, so don’t forget to install them also.

npm install --save bootstrap
npm install --save reactstrap

And don’t forget to set the Bootstrap Styles in your parent component.

import 'bootstrap/dist/css/bootstrap.min.css';

Usage

You only need to add the component DataTable and set the two main parameters:

data: array of objects with your data.
columns: array of objects that define the title and key of the desired data.

New!

Now in the columns property, you can access the property in nested object following the syntax object.nestObject.prop.

Also, there is a format callback that receives the row as a parameter to create a custom view of the field.

Look at the next example.

Example:

import React from 'react';
import { Container } from 'reactstrap';
import DataTable from '@bit/adeoy.utils.data-table';

import "bootstrap/dist/css/bootstrap.min.css";

const App = () => {
  const data = [
    {"id":1,"first_name":"Herold","last_name":"Hardwich","email":"[email protected]","gender":"Male","ip_address":"131.149.218.73"},
    {"id":2,"first_name":"Martelle","last_name":"Peddowe","email":"[email protected]","gender":"Female","ip_address":"249.160.225.74"},
    {"id":3,"first_name":"Devan","last_name":"Foulstone","email":"[email protected]","gender":"Female","ip_address":"28.60.122.122"},
    {"id":4,"first_name":"Rice","last_name":"Halsey","email":"[email protected]","gender":"Male","ip_address":"49.93.93.32"},
    {"id":5,"first_name":"Corrina","last_name":"Fitzer","email":"[email protected]","gender":"Female","ip_address":"54.248.51.249"},
    {"id":6,"first_name":"Kermy","last_name":"Bett","email":"[email protected]","gender":"Male","ip_address":"43.3.243.27"},
    {"id":7,"first_name":"Doroteya","last_name":"Kingh","email":"[email protected]","gender":"Female","ip_address":"147.151.8.68"},
    {"id":8,"first_name":"Obed","last_name":"Iacovino","email":"[email protected]","gender":"Male","ip_address":"196.237.176.255"},
    {"id":9,"first_name":"Kelcy","last_name":"Crowhurst","email":"[email protected]","gender":"Female","ip_address":"133.118.121.242"},
    {"id":10,"first_name":"Lorena","last_name":"Charlot","email":"[email protected]","gender":"Female","ip_address":"37.66.237.110"},
    {"id":11,"first_name":"Iormina","last_name":"Falcus","email":"[email protected]","gender":"Female","ip_address":"37.178.65.32"},
    {"id":12,"first_name":"Nathalie","last_name":"Joderli","email":"[email protected]","gender":"Female","ip_address":"222.244.240.186"},
    {"id":13,"first_name":"Juan","last_name":"Cranmer","email":"[email protected]","gender":"Male","ip_address":"10.174.5.52"},
    {"id":14,"first_name":"Ricoriki","last_name":"O'Kynsillaghe","email":"[email protected]","gender":"Male","ip_address":"125.250.102.200"},
    {"id":15,"first_name":"Ky","last_name":"Batsford","email":"[email protected]","gender":"Male","ip_address":"10.78.70.171"}
  ];

  const columns = [
    { title: "#", data: "id" },
    { title: "First name", data: "first_name" },
    { title: 'Last Name', format: (row) => <strong>{row.last_name}</strong> },
    { title: 'Email', format: (row) => <em>{row.email}</em> },
    { title: "Gender", data: "gender" },
    { title: "IP address", data: "ip_address" },
  ];

  const click = (row) => {
    console.log(row);
  };

  return (
    <>
      <h5 className="mt-2 mb-4 text-center">Simple React DataTable</h5>
      <DataTable
        data={data}
        columns={columns}
        striped={true}
        hover={true}
        responsive={true}
        onClickRow={click}
      />
    </>
  );
};

export default App;

Demo

You can check an example in the Bit Page of the component.

Do you have opinions or questions?

Please be free to ask me anything in the comments below 🙂

css datatable javascript json react react-hooks