inferno-datatable
v0.1.0
Published
InfernoJS datatables without jQuery. Smart Inferno datatable that includes search, pagination and localization.
Downloads
3
Maintainers
Readme
inferno-datatable
A InfernoJS datatables without jQuery. Smart datatable that includes search, pagination, and localization support.
DEMO: InfernoJS Datatables in Action!
Jump to: installing, required props, costumization (e.g. localization) via config, styling, roadmap, contributing.
Fun fact, this a re-write of my React-based datatables library.
Install
To get started with inferno-datatable
in your project:
npm i inferno-datatable --save
# or
yarn add inferno-datatable --save
Then:
import InfernoDatatable from 'inferno-datatable';
// somewhere:
<InfernoDatatable
tableKey={key}
columns={columns}
rows={rows}
config={config} // optional, overrides all default settings/labels
/>
Now you are all set to enjoy some InfernoJS datatables in your project! 🙌
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-inferno-app
that you can use to try out the library.
Required Prop Docs
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: 'id',
label: '#',
}, {
key: 'name',
label: 'Name',
}, {
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 = [
{
id: 1,
name: 'Sansa Stark',
email: '[email protected]',
onClickHandler: someFunction,
isActive: true,
},
{
id: 2,
name: 'Jon Snow',
email: '[email protected]',
onClickHandler: someFunction,
isActive: false,
},
];
The key onClickHandler
is optional. It will attach an onClick()
callback on the row. The isActive
prop is also optional. The row that has this prop set to true will have a special class applied (CSS styling purposes).
Config prop
You can pass a config
prop the <InfernoDatatable />
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:
itemsPerPageOptions
: anArray
ofNumber
s, defaults to[10, 25, 50, 100]
,itemsPerPageLabel
: aString
, defaults toEntries per page:
nextPageLabel
: aString
, defaults toNext
previousPageLabel
: aString
, defaults toBack
searchLabel
: aString
, defaults toSearch:
searchPlaceholder
: aString
, default toType to search…
noEntriesLabel
: aString
, defaults toNo entries to show.
entryCountLabels
: anArray
ofString
s, defaults to['Showing', 'to', 'of', 'entries.']
. Prints out Showing 10 to 20 of 300 entires. at the bottom of the table.
See the customOptions object in the demo data for an example of how it is used in example #2 on the demo page.
Styling
Out of the box, inferno-datatable
is somewhat bare-bones. Include this CSS starter file in your project to get the look from the demo. Edit it to suit your needs.
The distribution of library (see lib
directory) comes with a cool .css
file that has the markup from above.
Roadmap
- More control over pagination and search (and a better performing search!)
- Unit and performance tests.
- Sortable columns.
- CSV/PDF/Excel download
- ~~Localization support~~ (available since v0.1.15)
Contribute
There are many ways to contribute. For example:
- Test the library in your project, open an issue if you find bugs or problems!
- If you are enjoying the library, star it here on Github to show your support.
- Have a feature request? Want the roadmap to hurry up? Open a feature request via the issues tab.
- Fixed a problem or added a feature on your fork? Send a PR to make it part of the main distribution.
- The docs could be better? Found a typo? Submit a PR!
Need help with your first PR in OSS? Open an issue and we will find something simple and cool for you!