react-ajax-data-table-component

v1.4.6

Published

3 years ago

A declarative react based data table

Downloads

0High
0Medium
0Low

digibyte

react data table tables react-table react-data-table react-data-table-component

React Data Table Component Demo

React Data Table Component

Creating yet another React table library came out of necessity while developing a web application for a growing startup. I discovered that while there are some great table libraries already available, most required heavy customization or lacked basic features such as built in sorting and pagination, and in some cases required a restrictive license.

If you want to achieve balance with the force and want a simple but flexible table library give React Data Table Component a chance. If you require an Excel clone and need to pivot large data sets then this is not the React table library you are looking for 👋

Key Features

Declarative Configuration
Sortable (client)
Selectable Rows
Expandable Rows
Themeable via js config
Data Aware (i.e. easily callback to a parent component get the DataTable state, e.g. selectedRows
Responsive (via x-scroll/flex)
Pagination

Requirements

React Data Table Component requires the following be installed in your project:

React 16.3+
styled-components 3.2.3+ || 4.0.0+

If you need to have backwards compatability with React versions previous to 16.3 you will have to yarn add [email protected].

** Note that versions previous to [email protected]` are deprecated and will no longer be maintained. **

Installation

React Data Table requires the wonderful styled-components library. If you've already installed styled-components there is no need to install it again.

npm install react-data-table-component styled-components

yarn add react-data-table-component styled-components

API/Usage

Columns

Nothing new here - we are using an array of object literals and properties to describle the columns:

| Property | Type | Required | Example | |----------|--------|----------|---------------------------------------------------------------------------------------------------------------| | name | string | no | the display name of our Column e.g. 'Name' | | selector | string | yes | the propery in the data set e.g. property1.nested1.nested2. | | sortable | bool | no | if the column is sortable | | format | func | no | format the selector e.g. row => moment(row.timestamp).format('lll') | | cell | func | no | for ultimate control use cell to render your own custom component! e.g row => <h2>{row.title}</h2> Negates format | | grow | number | no | flex-grow of the column. the is useful if you want a column to take up more width than its relatives (without having to set widths explicitly). this will be affected by other columns where you have explicitly set widths | | width | string | no | give the column a fixed width | | minWidth | string | no | give the column a minWidth | | maxWidth | string | no | give the column a maxWidth | | right | bool | no | right aligns the content in the cell. useful for numbers | | center | bool | no | center aligns the content in the cell | | compact | bool | no | reduces the padding in the cell by 50% | | button | bool | no | applies additional styling when using a button | | wrap | bool | no | whether the cell content shold be allowed to wrap. | | allowOverflow | bool | no | allows content in the cell to overflow. useful for menus/layovers that do not rely on "smart" positioning | | ignoreRowClick | bool | no | prevents the onRowClicked event from being passed on a specific TableCell column. This is really useful for a menu or button where you do not want the onRowClicked triggered

DataTable Properties

| Property | Type | Required | Default | Description | |--------------------------|---------------------|----------|---------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | title | string or component | no | | The Title displayed in the Table Header | | columns | array | yes | [] | The column configuration | | data | array | no | [] | it is highly recommended that your data has a unique identifier (keyField). The default keyField is id. If you need to override this value then see keyField DataTable Properties. | | keyField | string | no | 'id' | your data should have a unique identifier. By default, React Data Table looks for an id property for each item in your data. You must match keyField to your identifier key, especially if you want to manage row state at a later time or use the expander feature. If a unique id is not present, React Data Table will use the row index (not recommended) as the key value | | progressPending | bool | no | | disables the table and displays a plain text Loading Indicator | | progressComponent | component | no | | allows you to use your own custom progress component | | progressCentered | bool | no | | absolutely position and center the progress over the table | | selectableRows | bool | no | false | Whether to show selectable checkboxes | | selectableRowsComponent | func | no | | Override the default checkbox component - must be passed as a function (e.g. Checkbox not <Checkbox />) | | selectableRowsComponentProps | object | no | | Additional props you want to pass to selectableRowsComponent. See Advanced Selectable Component Options to learn how you can override indeterminate state | | expandableRows | bool | no | false | Whether to make a row expandable, if true it requires an expandableRowsComponent. It is highly recommended your data set have a unique identifier defined as the keyField for row expansion to work properly. | expandableRowsComponent | string or component | no | | A custom component to display in the expanded row. It will have the data prop composed so that you may access the row data | | noDataComponent | string or component | no | | A custom component to display when there are no records to display | sortIcon | component | no | | Override the default sort icon - the icon must be a font or svg icon and it should be a "downward" icon since animation will be handled by React Data Table | | striped | bool | no | false | stripe color the odd rows | | highlightOnHover | bool | no | false | if rows are to be highlighted on hover | | pointerOnHover | bool | no | false | if rows show a point icon on hover | | actions | component or array of components | no | | add actions to the TableHeader | | contextTitle | string | no | | override the context menu title | | contextActions | component or array of components| no | | add context actions to the TableHeader context| | onTableUpdate | func | no | | callback to access the entire Data Table state ({ allSelected, selectedCount, selectedRows, sortColumn, sortDirection, rows }) | | onRowClicked | func | no | | callback to access the row data,index on row click | | clearSelectedRows | bool | no | false | toggling this property clears the selectedRows. If you use redux or react state you need to make sure that you pass a toggled value or the component will not update. See Clearing Selected Rows| | defaultSortField | string | no | | Setting this ensures the table data is presorted before it renders and the field(selector) is focused | | defaultSortAsc | bool | no | true | set this to false if you want the table data to be sorted in DESC order | | className | string | no | | override the className on the Table wrapper | | style | object | no | | override the style on the Table wrapper | | overflowY | bool | no | false | if a table is responsive, items such as layovers/menus/dropdowns will be clipped on the last row(s) due to to overflow-x-y behavior - setting this value ensures there is invisible space below the table to prevent "clipping". However, if possible, the correct approach is to use menus/layovers/dropdowns that support smart positioning. If used, the table parent element must have a fixed height or height: 100%. | | overflowYOffset | string | no | 250px | used with overflowY to "fine tune" the offset | | responsive | bool | no | true | makes the table horizontally scrollable on smaller screen widths | | customTheme | object | no | | Override the default theme, by overriding specifc props. Your changes will be merged. See Theming for more information | | disabled | bool | no | false | disables the Table section | | noHeader | bool | no | false | removes the table header. title, contextTitle and contextActions will be ignored | | fixedHeader | bool | no | false | makes the table header fixed allowing you to scroll the table body | | pagination | bool | no | false | enable pagination with defaults | | paginationTotalRows | number | no | 0 | allows you to provide the total row count for your table as represented by your API when performing server side pagination. if this property is not provided then react-data-table will use data.length | | paginationPerPage | number | no | 10 | rows per page | | paginationRowsPerPageOptions | number | no | [10, 15, 20, 25, 30] | row page dropdown selection options | | onChangePage | func | no | null | callback when paged that returns the current page and total row count. e.g. onChangePage(page, totalRows) | | onChangeRowsPerPage | func | no | null | callback when rows per page is changed that returns the new rows per page| | paginationComponent | func | no | Pagination | a component that overrides the default paginator component | | paginationIconFirstPage | | no | JSX | a component that overrides the first page icon for the pagination | | paginationIconLastPage | | no | JSX | a component that overrides the last page icon for the pagination | | paginationIconNext | | no | JSX | a component that overrides the next page icon for the pagination | | paginationIconPrevious | | no | JSX | a component that overrides the previous page icon for the pagination | | subHeader | component or array of components | no | false | show a subheader between the table and table header | subHeaderAlign | string | no | right | align the subheader content (left, right, center) | subHeaderWrap | bool | no | true | whether the subheader content should wrap | subHeader | component or array of components | no | false | show a subheader between the table and table header | subHeaderComponent | component or array of components | no | [] | a component you want to render |

Advanced Selectable Component Options

Sometimes 3rd party checkbox components have their own way of handling indeterminate state. We don't want React Data Table hardcoded to a specific ui lib or custom component, so instead a "hook" is provided to allow you to pass a function that will be resolved by React Data Table's internal Checkbox for use with indeterminate functionality.

Example Usage:


const { Checkbox } from 'react-md';

...

/* 
  In this example, the react-md ui lib determines its own indeterminate state via the `uncheckedIcon` property. 
  Let's override it. React Data Table is made aware if a checkbox is indetermite or not becuase internally we can resolve this   as `yourfunction(checkboxawareindeterminatestate)`
*/

const handleIndeterminate = isIndeterminate => (isIndeterminate ? <FontIcon>indeterminate_check_box</FontIcon> : <FontIcon>check_box_outline_blank</FontIcon>);

const MyComponent = () => (
  <DataTable
    title="Arnold Movies"
    columns={columns}
    data={data}
    selectableRows
    selectableRowsComponent={Checkbox} // Pass the function only
    selectableRowsComponentProps={{ uncheckedIcon: handleIndeterminate  }}
  />
);

Note This is currently only supported for indeterminate state, but may be expanded in the future if there is a demand

Basic Table

The following declarative structure creates a sortable table of Arnold movie titles:

import DataTable from 'react-data-table-component';

const data = [{ id: 1, title: 'Conan the Barbarian', year: '1982' } ...];
const columns = [
  {
    name: 'Title',
    selector: 'title',
    sortable: true,
  },
  {
    name: 'Year',
    selector: 'year',
    sortable: true,
    right: true,
  },
];

class MyComponent extends Component {
  render() { 
    return (
      <DataTable
        title="Arnold Movies"
        columns={columns}
        data={data}
      />
    )
  }
);

Selectable Rows

Let's make our rows selectable so we can access the selected results

...

const handleChange = (state) => {
  // You can use setState or dispatch with something like Redux so we can use the retrieved data
  console.log('Selected Rows: ', state.selectedRows);
};

class MyComponent extends Component {
  render() { 
      return (
        <DataTable
          title="Arnold Movies"
          columns={columns}
          data={data}
          selectableRows // add for checkbox selection
          onTableUpdate={handleChange}
        />
    )
  }
);

Clearing Selected Rows

We need some hook to trigger all the selectedRows to clear. If you were building your own table component, you would manage the selected rows state in some parent component, however, in our case, since we to keep row management within React Data Table, a clearSelectedRows prop is provided so you can pass a toggled state.

It will be up to you to make sure you do not pass the same state twice. For example, if you set clearSelectedRows={true} twice, on the second update/trigger, none the rows will not be cleared.

...
// set the initial state
state = { toggledClearRows: false }
...

const handleChange = (state) => {
  // You can use setState or dispatch with something like Redux so we can use the retrieved data
  console.log('Selected Rows: ', state.selectedRows);
};

// Toggle the state so React Table Table changes to `clearSelectedRows` are triggered
const handleClearRows = () => {
  this.setState({ toggledClearRows: !this.state.toggledClearRows})
}

class MyComponent extends Component {
  render() { 
    return (
      <DataTable
        title="Arnold Movies"
        columns={columns}
        data={data}
        selectableRows // add for checkbox selection
        onTableUpdate={handleChange}
        clearSelectedRows={this.state.toggledClearRows}
      />
    )
  }
);

Overriding with a 3rd Party Ui Component Library

Don't like those ugly html checkboxes? Let's override them with some react-md sexyiness. While we are at it we will also override the sortIcon:

...
import { Checkbox, FontIcon } from 'react-md';
...

class MyComponent extends Component {
  render() { 
    return (
      title="Arnold Movies"
      columns={columns}
      data={data}
      selectableRows
      selectableRowsComponent={Checkbox} // Pass the function only
      selectableRowsComponentProps={{ inkDisabled: true }} // optionally, pass react-md supported props down to our custom checkbox
      sortIcon={<FontIcon>arrow_downward</FontIcon>} // use a material icon for our sort icon
      onTableUpdate={handleChange}
    />
    )
  }
);

Custom Cells

Let's give our Movie list a summary, but in the same cell as Name:

....

const data = [{ id: 1, title: 'Conan the Barbarian', summary: 'Orphaned boy Conan is enslaved after his village is destroyed...',  year: '1982' } ...];
const columns = [
  {
    name: 'Title',
    sortable: true,
    cell: row => <div><div style={{ fontWeight: bold }}>{row.title}</div>{row.summary}</div>,
  },
  {
    name: 'Year',
    selector: 'year',
    sortable: true,
    right: true,
  },
];

...

class MyComponent extends Component {
  render() { 
    return (
      <DataTable
        title="Arnold Movies"
        columns={columns}
        data={data}
        selectableRows
        selectableRowsComponent={Checkbox}
        selectableRowsComponentProps={{ inkDisabled: true }}
        sortIcon={<FontIcon>arrow_downward</FontIcon>}
        onTableUpdate={handleChange}
      />
    )
  }
);

Expandable Rows

Let's make our rows expandable so we can view more details:

...

const data = [{ id: 1, title: 'Conan the Barbarian', summary: 'Orphaned boy Conan is enslaved after his village is destroyed...',  year: '1982', image: 'http://conan.image.png' } ...];
const columns = [
  {
    name: 'Title',
    sortable: true,
    cell: row => <div><div style={{ fontWeight: 700 }}>{row.title}</div>{row.summary}</div>,
  },
  {
    name: 'Year',
    selector: 'year',
    sortable: true,
    right: true,
  },
];

...

// The row data is composed into your custom expandable component via the data prop
const ExpanableComponent = ({ data }) => <img src={data.image} />;

class MyComponent extends Component {
  render() { 
    return (
      <DataTable
        title="Arnold Movies"
        columns={columns}
        data={data}
        selectableRows
        selectableRowsComponent={Checkbox}
        selectableRowsComponentProps={{ inkDisabled: true }}
        sortIcon={<FontIcon>arrow_downward</FontIcon>}
        onTableUpdate={handleChange} 
        expandableRows
        expandableRowsComponent={<ExpanableComponent />}
      />
    )
  }
);

Theming

You can override or replace the default theme using the customTheme prop. Internally, this just deep merges your theme with the default theme.

For Example:

// Override the row default height
const mySweetTheme = {
  rows: {
    height: '64px'
  }
}

class MyComponent extends Component {
  render() { 
    return (
      <DataTable
        title="Arnold Movies"
        columns={columns}
        customTheme={mySweetTheme}
      />
    )
  }
);

Refer to Default Theme for reference and avaiilable properties to override

Theme Resources

SVG Encoder

Development

Setup

Install the latest Node JS LTS and Yarn and simply run yarn or yarn install command in the root and stories directory.

Installing Flow Types

Install flowtypes using the package script:

yarn flow-typed

It is advised to run the script whenever NPM packages are installed.

Local development

During development,

# watch and build new source changes
yarn start
# or serve *.stories.js files and manually test on the Storybook app
yarn storybook

Including NPM packages

This project uses two package.json structure.

Library dependencies -- <root_dir>/package.json

yarn add [package-name] --dev # for dev tools
yarn add [package-name] # for app

Storybook dependencies -- <root_dir>/stories/package.json

cd stories/
yarn add [package-name]

Static Types

yarn flow # performs type checking on files

Lint

yarn lint # runs linter to detect any style issues (css & js)
yarn lint:css # lint only css
yarn lint:js # lint only js
yarn lint:js --fix # tries to fix js lint issues

Test

yarn test # runs functional/unit tests using Jest
yarn test --coverage # with coverage

Build

yarn build # builds sources at src/