ArunAdPushup/react-bs-datatable

React Bootstrap Datatable with sorting, filter, and pagination

React Bootstrap Datatable

Inspired by react-data-components. This library uses react-bootstrap stylesheets and javascripts. In addition, this library also uses font-awesome for the table header, clear filter, and other stuffs.

Key features

1. Sorting
2. Filter
3. Pagination

Props

• tableHeader (Required): Array of objects, each consists of:
  • title: String. Text for the header column.
  • prop (Required): String. Column name for the table body.
  • filterable: Boolean. Enable/disable filtering on the column.
  • sortable: Boolean. Enable/disable sorting on the column.
• tableBody (Required): Array of objects, each consists of propNames and propValues, depends on how many columns you define in the header.
• tableClass: String. Classes used in element tag. Default: ''.
• keyName (Required): String. It is used to prepend the key property of children elements.
• rowsPerPage: Integer. Initial rows per page. Default: undefined.
• rowsPerPageOption: Array of integer, each consists of pagination options. Default: undefined.
• initialSort: Object, consists of prop (String) and isAscending (Boolean). Default: undefined.
• onSort: Object, consists of keys and values. Key is the prop name and value is the quantifier function. Default: undefined.

Styling

This package doesn't include Bootstrap stylesheets. If you want to include it, you could do so by importing its CSS in your HTML or its SCSS bootstrap-sass in your SCSS. You can also style the table by defining it in your SCSS.

.table-datatable {
  .thead-default {
    .thead-tr-default {
      .thead-th-default {
        &.sortable { // If and only if a column is sortable
          &:hover {
            background: #000; // Your color of choice
            cursor: pointer; // Changes the cursor into a pointer on hover
          }
        }
      }
    }
  }

  .tbody-default {
    .tbody-tr-default {
      .tbody-td-default {
        // do what you want
      }
    }
  }
}

Example usage

import moment from 'moment'; // Example for onSort prop
import React from 'react'; // Import React
import { render } from 'react-dom'; // Import render method
import Datatable from 'react-bs-datatable'; // Import this package

const header = [
  { title: 'Username', prop: 'username', sortable: true, filterable: true },
  { title: 'Name', prop: 'realname', sortable: true },
  { title: 'Location', prop: 'location' },
  { title: 'Last Updated', prop: 'date', sortable: true },
];

const body = [
  { 
    username: 'i-am-billy', 
    realname: 'Billy', 
    location: 'Mars', 
    date: moment().subtract(1, 'days').format('Do MMMM YYYY'),
  },
  { 
    username: 'john-nhoj', 
    realname: 'John', 
    location: 'Saturn',
    date: moment().subtract(2, 'days').format('Do MMMM YYYY'),
  }
];

const onSortFunction = {
  date(columnValue) {
    // Convert the string date format to UTC timestamp
    // So the table could sort it by date instead of sort it by string
    return moment(columnValue, 'Do MMMM YYYY').valueOf();
  },
};

render(
  <Datatable
    tableHeader={header}
    tableBody={body}
    keyName="userTable"
    tableClass="striped hover responsive"
    rowsPerPage={5}
    rowsPerPageOption={[5, 10, 15, 20]}
    initialSort={{prop: "username", isAscending: true}}
    onSort={onSortFunction}
  />,
  document.getElementById('react-test')
);

Next features/improvements

• Sortable props for each column instead of globally
• Custom sort function (eg. date is ordered by timestamp not by string)
• Filterable props for each column instead of globally
• Custom table classes (it's fixed to striped, responsive, and hover at the moment)
• More extensive unit testing
• Custom position for filter input field, pagination options, and page navigation
• Lazy loading for big data (virtualization, asynchronous pagination)

Contributing

Feel free to contribute by creating issues and/or pull requests. I will do my best to address them as fast as I can.