Giters

joetidee / react-redux-datatable

In production...

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

react-redux-datatable

This is currently still in production.

Creating a datatable

import DataTableWrapper from 'DataTableWrapper.jsx';
let MyTable = DataTableWrapper("someUniqueName");
...js
<MyTable ... />
...

DataTableWrapper is higher order component(HOC) that will return a component, in this case "MyTable". Therefore, you can then use <MyTable /> in your component and pass whatever props you need (see below). You can create as many datatables as you need and they will behave independently of each other.

Managing the datatabled in Redux

Simply add a dataTables Object to the root of your store, e.g. dataTables: {}. This object contains the following properties:

  • loading (Boolean): Indicates if the table data is in the process of being loaded.

  • sortingEnabled (Boolean): Indicates if column sorting is enabled on the table.

  • queryParams (Object): Contains properties used by the dataFetchFunction function. Namely:

    • searchParams (Object)
    • sortParam: (Object)
    • skip: (Integer)
    • limit: (Integer)

  • searchParamsDict (Object):

  • searchTerm (String):

  • pageSizeList (Array): An array of values that the user of the datatable can select to adjust the page size. Default is [50,200,500].

  • dataFetchTriggerKey (String): Changing the value of this key will force a re-fetch of the data in the table.

  • data (Array): An array of objects representing the data to be insterted into the table.

Props

columnConfig (Array of Objects) Provides information about the data stored in each column. Each column is represented by an Object with the following properties:

  • className (String): The CSS class name to apply to each table cell of this column.
  • content (String): The content of the column header cell.
  • dbField (String): The name of the field (in the database) that the column matches to.
  • dbSearchField (String): If a search field is used with the table to filter the data, this refers to the name of the field (in the database) that the search facility will use.
  • sorting (Boolean): Enable/disable sorting on the table column.
  • style (Object): Inline CSS styles to be applied to each cell of this column.

defaultColumnSorting (Object) Provides information about how the table should be sorted when it is initially rendered.

  • index (Interger): A zero-based index of the column number.
  • field (String): The field (in the database) that represents the data in the column.
  • dir (String): The direction of the sort (either 'asc' or 'desc').

dataFetchFunction (Function) A function that will fetch data to pass to the Data Table. It receives the queryParams object as its first argument. This function must return a Promise.

renderRow (Function) A function that will process each row of data returned by the dataFetchFunction. The renderRow function will be supplied with an Object that will represent the row data and should return an Object:

  • attr (Object): Each property within this object will be applied to the row as an attribute of the <tr> element.
  • data (Array): An array, where each element represents the content of the column within the row.

tableClass (String) A CSS class name that will be added to the rendered table.

Helper Functions

guid()

Generates a unique id. Can be used to generate a value for the refetch prop.

About

In production...