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.
- Sorting
- Filter
- Pagination
- 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
andpropValues
, 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) andisAscending
(Boolean). Default:undefined
. - onSort: Object, consists of keys and values. Key is the prop name and value is the quantifier function. Default:
undefined
. - 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)
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
}
}
}
}
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')
);
Feel free to contribute by creating issues and/or pull requests. I will do my best to address them as fast as I can.