A React and Redux-based table for server-processed data.
Switch branches/tags
Nothing to show
Clone or download
Latest commit c3c7fb7 Nov 8, 2018
Permalink
Failed to load latest commit information.
build build Mar 25, 2018
public add example repo Mar 20, 2018
src fix render pagebuttons Mar 25, 2018
.DS_Store fix index.js Mar 8, 2018
.babelrc build Mar 9, 2018
.gitignore some more gitignore Mar 8, 2018
LICENSE Create LICENSE Mar 26, 2018
README.md Update README.md Nov 8, 2018
package-lock.json 0.1.15 Mar 25, 2018
package.json 0.1.15 Mar 25, 2018
webpack.config.js deps Mar 25, 2018
yarn.lock bump Mar 8, 2018

README.md

redux-remote-datatable

Test it out here. project example

Installation

npm i redux-remote-datatable --save

Usage

  • Add the reducer.
import { dataTableReducer } from 'redux-remote-datatable';

...

const appReducer = persistCombineReducers(config, {
  dataTableReducer,
  ...
});
  • Add the DataTableRedux component with its required initialization props.
import { DataTableRedux as DataTable } from 'redux-remote-datatable';

...

<DataTable
  fields={{"Name": "official_name", "Birthday": "birthday", "Thomas ID": "thomas_id" }}
  ajax="http://localhost:3000/legislators"
  idField="id" />

Initialization props

  • fields: An object whose keys are the table header titles and whose values correspond with values in the received data objects.
  • ajax: The data url.
  • idField: The unique identifier field of the received data objects. Used when assigning keys to child elements.

The component will make POST requests to the ajax endpoint for data to populate the table. In the body of the POST request will be a JSON object with the following parameters:

Request parameters

  • draw: starts at 1 and is incremented by 1 every time data is requested from the remote server and the table is re-drawn.
  • page: The current page.
  • perPage: The amount of data objects to be requested and displayed per page.
  • sortField: The field to sort the data by. Can be null.
  • sortDirection: One of asc and desc.
  • searchValue: The user-inputted search string. Default is a blank string.

Response parameters

  • draw: echo the draw from the request.
  • totalRecords: Record count before pagination.
  • data: An array of JSON objects with keys corresponding to the pre-defined fields.

Example response

{
    "draw": "1",
    "totalRecords": 473,
    "data": [
        {
            "id": 52,
            "official_name": "Roy Blunt",
            "thomas_id": "01464",
            "birthday": "1950-01-10"
        },
        {
            "id": 51,
            "official_name": "Richard Blumenthal",
            "thomas_id": "02076",
            "birthday": "1946-02-13"
        },
        ...
    ]
}

Example backend

  • An example backend, written in Ruby on Rails, is available here.
  • A separate example backend written in Elixir (Phoenix) here.