inferno-datatable

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: '[e-mail]',
    onClickHandler: someFunction,
    isActive: true,
  },
  {
    id: 2,
    name: 'Jon Snow',
    email: '[e-mail]',
    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: an Array of Numbers, 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, default to Type to search…
• noEntriesLabel: a String, defaults to No entries to show.
• entryCountLabels: an Array of Strings, 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!