2.0.0 • Published 7 years ago
react-datatable-nkg v2.0.0
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
- Sorting
- Filter
- 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
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
.
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.