kenforthewin / react-redux-datatable

A React and Redux-based table for server-processed data.

redux-remote-datatable

Test it out here.

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.

react-redux-datatable's Issues

Example or tutorial

Hi , it would be really cool if you provide an example code or more detailed documents . And perfectly would be a small tutorial on how to use the package and its functions . Thank you , please reply if you would do that ?

Bootstrap 4 support

Hi,

first of all thanks a lot for this project, I am very happy that I found it, it helps me a lot.
I would like to ask you something, mostly related to an experience that I don't have right now.

I have a project that works with Bootstrap4, so there is a "style conflict" if I use this library.
This is why, right now as a workaround, I have cloned the github project, removed the bootstrap 3 dependency from package.json and removed the "import bootstrap" statement from src/components/DataTable.js .

I have changed my package.json to include this local module (adding some grunt stuff).

Everything works just fine, but it's a workaround and it basically sucks.

Now the question: do you think is somehow possible / it makes sense to introduce the chance to specify the bootstrap version in the props? Or maybe (but I don't think it's a good solution, because bootstrap is needed) remove the bootstrap dependency and leave the bootstrap requirement to the developer, at a project level?

Help with sample code

Hi,

Could you please share your sample code developed for the demo, since we tried according to the readme but it is not working getting error like "e is undefined".

Thanks