mb-react-data-table v2.0.3

React Data Table

WARNING : as this is a school project, I will not maintain nor provide support for it

A simple react library for displaying data as an html table. Features pagination, filtering results and column sorting with realtive ease of style customization.

Content

• 1 - Installation
• 2 - Basic usage
• 3 - More usages
  • Custom sort function
  • Row key
  • Styling
• 4 - Additional components
  • Reusing the default
  • Custom styling
• 5 - Components documentation
  • DataTable
  • EntriesNumberSelection
  • Pagination
  • Search Entries
  • Column header

Installation

npm i mb-react-data-table

Basic usage

Import the component:

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

Define your data as an array of object :

const data = [
  {
    firstName: "John",
    lastName: "Doe",
    age: 32,
  },
  {
    firstName: "Jane",
    lastName: "Doe",
    age: 26,
  },
];

Configure your columns

the name attribute will be displayed as column header, the dataKey attribute will reference the attribute of the data object

const columns = [
  {
    name: "First Name",
    dataKey: "firstName",
  },
  {
    name: "Last Name",
    dataKey: "lastName",
  },
  {
    name: "Age",
    dataKey: "age",
  },
];

Use the component

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

const App = () => {
  const data = [
    {
      firstName: "John",
      lastName: "Doe",
      age: 32,
    },
    {
      firstName: "Jane",
      lastName: "Doe",
      age: 26,
    },
  ];

  const columns = [
    {
      name: "First Name",
      dataKey: "firstName",
    },
    {
      name: "Last Name",
      dataKey: "lastName",
    },
    {
      name: "Age",
      dataKey: "age",
    },
  ];

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

Result

More usages

Custom sort function

By default the sorting is done lexicographically. If you need another sorting mechanism, you can provide a custom sort function in the header configuration.

For example in the above case, to sort on the age attribute :

const columns = [
  {
    name: "First Name",
    dataKey: "firstName",
  },
  {
    name: "Last Name",
    dataKey: "lastName",
  },
  {
    name: "Age",
    dataKey: "age",
    sortFn: (a, b) => a - b,
  },
];

The sortFn will receive the values of the age attributes and must return a number, just like the Array.prototype.sort compareFn parameter.

You only need to specify a sortFn that sorts in ascending order. The descending order is handled by the library by taking the opposite of your sortFn returned value.

Objects in data and formating

Sometimes your data will contain some non-primitive values, like Date objects

const data = [
  {
    firstName: "John",
    lastName: "Doe",
    dateOfBirth: new Date("1991-03-12"),
  },
  {
    firstName: "Jane",
    lastName: "Doe",
    dateOfBirth: new Date("1989-05-23"),
  },
];

By default the library will format the value using the .toString() method. If you need another formating logic, you can provide a formater function in the columns configuration :

const columns = [
  {
    name: "First Name",
    dataKey: "firstName",
  },
  {
    name: "Last Name",
    dataKey: "lastName",
  },
  {
    name: "Date of Birth",
    dataKey: "dateOfBirth",
    formater: date => date.toLocaleDateString(),
  },
];

Row key

Since the component renders a list of rows, react needs a unique key attribute to be set on each row.

If your data contains an id attribute, for example:

const data = [
  {
    id: "394d6c90-2763-49e6-b270-a4f41659e2b2",
    firstName: "John",
    lastName: "Doe",
    age: 32,
  },
  {
    id: "4ffa6b7f-1df3-448d-8eb9-a22a5a69ca89",
    firstName: "Jane",
    lastName: "Doe",
    age: 26,
  },
];

it will automatically be used as the key for each row.

You can also customize the generated key by passing a function in the prop rowKeyProducer. This function will receive the data object and must returns a string. For example :

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

const App = () => {
  const data = [
    {
      firstName: "John",
      lastName: "Doe",
      age: 32,
    },
    {
      firstName: "Jane",
      lastName: "Doe",
      age: 26,
    },
  ];

  const columns = [
    {
      name: "First Name",
      dataKey: "firstName",
    },
    {
      name: "Last Name",
      dataKey: "lastName",
    },
    {
      name: "Age",
      dataKey: "age",
    },
  ];

  return (
    <DataTable
      columns={columns}
      rowKeyProducer={data => `${data.firstName}-${data.lastName}-${data.age}`}
    >
      {data}
    </DataTable>
  );
};

The returned value will be used as the key for the row, so it must be unique among rows, otherwise react will throw the warning about non-unique keys

Styling

Simple color styling

In case you need to change the colors of

• the border color of the table
• the border color of the rows
• the backgound color of even rows
• the background color of odd rows

You can override some css custom properties used by the component.

Create a class and set the custom properties you want to override:

.table {
  --table-border-color: red;
  --row-border-color: lightgreen;
  --row-even-bg-color: aliceBlue;
  --row-odd-bg-color: lightyellow;
}

Apply this class to the component :

<DataTable columns={columns} className="table">
  {data}
</DataTable>

Results :

you may need to increase your css rule specificity to properly override the defaults

More controls over styling

If you need to apply more styles, you can pass classNames to the component :

<DataTable
  columns={columns}
  className="className" // will be applied to the main component
  tableClassName="tableClassName" // will be applied to the table element
  headerClassName="headerClassName" // will be applied to the tr element that contains the th elements
  rowClassName="rowClassName" // will be applied to all the tr elements that contains the td elements
  cellClassName="cellClassName" // will be applied to all the td elements
>
  {data}
</DataTable>

Additional components

This library provide four additional components alongside the main table components. These are the search box, the number of displayed rows selection, the column headers, and the pagination.

Optional render props are available on the table component for each of these in case you need full control over them. They are also exported as named export, in case you just need some small tweaks to the defaults. Let's take the number of displayed rows as an example to see how it works.

Reusing the default

Let's say you want the user to be able to choose between a list of 10 or 15 or 20, instead of the default 10 or 25 or 50 or 100.

First, import the components:

import DataTable, { EntriesNumberSelection } from "mb-react-data-table";

Declare your data and your columns configuration as always (we will skip this part here), and pass the render prop to the DataTable component as such:

<DataTable
  columns={columns}
  renderEntriesNumberSelection={props => (
    <EntriesNumberSelection {...props} availableNumbers={[10, 15, 20]} />
  )}
>
  {data}
</DataTable>

It works the same for the other components. The logic is you can have full control over these additional parts with the render props if you need to, but you can also reuse the exported components for convenience, especially if you only need some custom styles.

Custom styling

The exported components can receive some classNames to have full control over the styles, but just like the main table components you will be able to override some css custom properties in case you just need some color customization. This documentation will provide additional details on that in the section dedicated to each components.

Components documentation

DataTable

The main componenet of this library. Will render your data as an html table.

EntriesNumberSelection

The default component used to select the number of entries (rows) displayed.

Pagination

The default component used to paginate the results.

These css variables are applied to the component level, and can be overridden :

--pagination-button-bg-color: transparent; /* controls the background color of the pagination buttons */
--pagination-button-disabled-bg-color: transparent; /* controls the background color of the disabled pagination buttons */
--pagination-button-hover-bg-color: rgba(0, 0, 0, 0.1); /* controls the background color of the pagination buttons when hovered */
--pagination-button-active-bg-color: rgba(0, 0, 0, 0.15); /* controls the background color of the pagination button that matches the current page */

Search Entries

The default component used to filter the results

Column header

The default component used to render the table header cells.

These css variables are applied to the component level, and can be overridden :

--caret-color: rgb(201, 201, 201); /* controls the color of the carets */
--caret-active-color: inherit; /* controls the color of the caret matching the sort status */