React.js datatables without jQuery. Smart react datatable that includes search, pagination and localization.
A React.js datatables without jQuery. Smart datatable component that includes search, pagination, CSV export, and localization support.
Demos:
Jump to:
To get started with spicy-datatable
in your project:
npm i spicy-datatable --save
# or
yarn add spicy-datatable
Then, in your code:
import SpicyDatatable from 'spicy-datatable';
// …somewhere:
<SpicyDatatable
tableKey={key} // see below for prop documentation
columns={columns}
rows={rows}
config={config} // optional, used to override chosen default settings/labels
></SpicyDatatable>
Now you are all set to enjoy some ReactJS datatables in your project! No jQuery or other heavy dependencies. 🙌
Look at the demo data file for examples of how the rows
and columns
props look.
You can also clone this repo which includes a full demo with create-react-app
that you can use to try out the library.
The tableKey
is a String
used to identify the table dataset. It is required.
The columns
prop is an array of colum objects which have a key and label. Like this:
const columns = [{
key: 'userId',
label: '#',
}, {
key: 'name',
label: 'Name',
sort: true, // will enable a client-side sort for this column!
}, {
key: 'email',
label: 'Email',
},
];
The rows
prop is an array of objects that have the key: value
pairs described in our columns. For example:
const rows = [
{
userId: 1,
name: 'Sansa Stark',
email: 'sansa@winterfell.gov',
onClickHandler: someFunction,
isActive: true,
},
{
userId: 2,
name: 'Jon Snow',
email: 'jon@nightswatch.gov',
onClickHandler: someFunction,
isActive: false,
},
];
onClickHandler
is optional. It will attach an onClick()
callback on the row. Your handler will receive three params:event {Object}
, the proxied React click eventrow {Object}
, the row that was clickedindex {Number}
, the index of the item within the currently visible table viewisActive
prop is also optional. The row that has this prop set to true will have a special class applied (CSS styling purposes.)You can pass a config
prop the <SpicyDatatable ></SpicyDatatable>
component to change all the default settings and labels.
This is great if you want to change the text or localize your component. Here’s an overview of all the options you can specify via the config
object.
See the customOptions object in the demo data for an example of how it is used in example #2 on the demo page.
itemsPerPageOptions
: an Array
of Number
s, defaults to [10, 25, 50, 100]
,itemsPerPageLabel
: a String
, defaults to Entries per page:
nextPageLabel
: a String
, defaults to Next
previousPageLabel
: a String
, defaults to Back
searchLabel
: a String
, defaults to Search:
searchPlaceholder
: a String
, defaults to Type to search…
showDownloadCSVButton
: a Boolean
to turn the CSV export on or off, defaults to false
.downloadCSVButtonLabel
: a String
to change the label on the CSV button, defaults to Export CSV
.customCSVKeys
: an Array
of String
s to specify which keys should be included in the exported CSV.customCSVRowsFormatter
: a Function
that receives a single parameter rows
of type Array
and returns a similar structure back. Use this prop to format data that will be in the CSV.noEntriesLabel
: a String
, defaults to No entries to show.
entryCountLabels
: an Array
of String
s, defaults to ['Showing', 'to', 'of', 'entries.']
. Prints out Showing 10 to 20 of 300 entires. at the bottom of the table.customFilter
: a Function()
that can be used to override the default search logic. It will get three params: (rows, columns, searchQuery)
and should return a new rows
of type Array
.Example:
Say you want to only search for matches in the name
column while ignoring case sensitivity:
const customFilter = (rows, columns, searchQuery = '') => {
return rows.filter(row => row.name.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1);
}
Out of the box, spicy-datatable
is bare-bones. Include this CSS starter file in your project to get the look from the demo. Edit it to suit your needs.
Q: I want the search feature to account for accidental typos (or implement a different type of logic altogether).
A: Check the prop config object, it has a customFilter
options. Here’s a sample object that has a custom filter function.
Q: Is this component compatible with React 15.5.x?
A: Yep! And we’ll be switching to 16.x.x once it’s stable.
Q: Is the CSV export supported by MS Edge / Internet Explorer 11?
A: Yep, and it should be supported by IE9+.
Q: There is no CSV button in my table?!
A: This CSV export is an optional feature, you need to turn it on via a prop config object.
Q: How can I style the CSV button?
A: The button has a CSS class spicy-datatableoptions-export--button
and is wrapped by spicy-datatableoptions-export--button-wrapper
. See the sample from the styling section.
There are many ways to contribute. For example:
Need help with your first PR in OSS? Open an issue and we will find something simple and cool for you!