react-data-table-modify

A simple-to-use React table library with interesting features

• Capability to be configured to display arrays of objects with simple columns configuration
• Multi-criterias sort, including typechecking (dates, numbers & strings).
• Locale display

Short term evolution

• add cell editing (2.0)

:mag_right: Preview

Live demo

https://olivierbussier.github.io/react-data-table-modify/

data for this live demo have been created using faker

Install

1npm install react-data-table-modify

Usage

1import React, { Component } from 'react'
2
3import {Datatable} from 'react-data-table-modify'
4
5const App = () => {
6
7    return <DataTable formatCols={} data={} curPage={} nbPerPage={} />
8
9}

Description of props

FormatCols

This prop is used to explain to DataTable the structure of data to display. The structure understood by DataTable is an array of objects, each object describe a row of the data.

Consider you want to display an array of objects having the following data structure:

1const data = [
2  {
3    xName: "Calin",
4    dateOfBirth: "Thu Feb 11 2020",
5    description: "First pet of my wife"
6  },
7  ...
8]

The corresponding 'formatCols' prop will be :

1const format = [
2  {
3    name: "Name of the animal", // Header name of the column
4    data: "xName",              // name of the property in the data object
5    type: "string"              // Type of the col here 'string'
6  },
7  {
8    name: "Birth Date",
9    data: "dateOfBirth" ,
10    type: "date"                // Type of the col, here 'date'
11  },
12  {
13    name: "Description",
14    data: "description",
15    type: "string"
16  }
17]

And finally, for these data, you will use DataTable this way

1
2  <DataTable formatCols={format} data={data}>

Pagination

DataTable comes with a Pagination companion component. In this case, you could send to Datatable component whole data and specify by props which part of these data you want to display

The props used to doing that are :

• nbPerPage : Number of items to display
• curPage : The page you want to display (0 to n)

You could maintain a state variable for curPage in your App (with your pagination component) and pass this variable as props to DataTable

Usage of DataTable with Pagination component

At least, you have to declare state variables:

• First one to maintain the value of the current page.
• Second one for the number of items per page if you want this to be dynammicly changed

1
2import {DataTable, Pagination} from 'react-data-table-modify'
3
4const App = () => {
5  const nbPerPage = 10
6  const [curPage, setCurPage] = useState(0)
7
8  data = ...fetch / Array...
9
10  return (
11    <div>
12      <DataTable
13        formatCols={formatCols}
14        data={data}
15        curPage={curPage}
16        nbPerPage={nbPerPage}
17      />
18      <Pagination
19        nbItems={data.length}
20        nbPerPage={nbPerPage}
21        curPage={curPage}
22        onPageChange={(page) => setCurPage(page)}
23      />
24    </div>
25  )
26}

Sorting capabilities

Datatable is able to sort data with 3 colums, ascending/descending

• If you click on a column header you will sort data using this column. If you click again on the same column, this will inverse the sens of sorting.
• If you maintain 'shift key' when you click on header cols, you will preserve previous sort choices (max 3)
• If you have already 3 sort cols selected and you click with shift key pressed, then you erase previous sort choices

Columns are sorted depending of their types, meaning that dates are sorted correctly

CSS Structure

Display of DataTable component could be customised easily using css overriding, hereafter the structure of scss in place

1.data-table {
2    // Container of whole DataTable component
3    th {
4        position: relative;  // Origin of children's absolute
5        background-image: url(/* Caret up&down*/);
6        &.asc {
7            background-image: url(/* caret up */);
8        }
9        &.desc {
10            background-image: url(/* caret dpwn */);
11        }
12        &.sort-col-0 {
13            &:after {
14                position: absolute;
15                content: '1';
16            }
17        }
18        &.sort-col-1 {
19            &:after {
20                position: absolute;
21                content: '2';
22            }
23        }
24        &.sort-col-2 {
25            &:after {
26                position: absolute;
27                content: '3';
28            }
29        }
30    }
31    tbody tr {
32        background: white;
33        &:nth-child(2n+1) {
34            background-color: /* color of odd rows */
35        }
36    }
37    tr:nth-child(2n+1) {
38        .sort-col-0, .sort-col-1, .sort-col-2 {
39            background-color: /* color of odd rows */
40        }
41    }
42    tr:nth-child(2n+2) {
43        .sort-col-0, .sort-col-1, .sort-col-2 {
44            background-color: /* color of even rows
45        }
46    }
47
48}
49

And for Pagination component

1.app-pagination {
2    // Container of whole Pagination component
3    .active {
4        // Active button
5        &:hover {
6          // Active button hovered
7        }
8    }
9
10    button {
11      // Buttons
12        &.left-btn {
13            //Left Button
14        }
15        &.middle-btn {
16            // Middle Buttons (other than left & right)
17        }
18        &.right-btn {
19            //Right Button
20        }
21        &:hover {
22          // Hovered Buttons
23        }
24    }
25}

License

MIT © olivierbussier