{"id":13850461,"url":"https://github.com/bencripps/react-redux-grid","last_synced_at":"2025-05-16T15:07:57.010Z","repository":{"id":3845036,"uuid":"49901310","full_name":"bencripps/react-redux-grid","owner":"bencripps","description":"A React Grid/Tree Component written in the Redux Pattern ","archived":false,"fork":false,"pushed_at":"2023-02-27T22:43:54.000Z","size":8681,"stargazers_count":443,"open_issues_count":51,"forks_count":61,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-05-08T20:31:55.034Z","etag":null,"topics":["grid","grid-component","react","redux","tree"],"latest_commit_sha":null,"homepage":"http://react-redux-grid.herokuapp.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bencripps.png","metadata":{"files":{"readme":"README.MD","changelog":"CHANGELOG.md","contributing":"docs/CONTRIBUTING.MD","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-01-18T19:54:56.000Z","updated_at":"2025-04-09T20:53:36.000Z","dependencies_parsed_at":"2023-07-06T05:56:01.721Z","dependency_job_id":null,"html_url":"https://github.com/bencripps/react-redux-grid","commit_stats":{"total_commits":561,"total_committers":27,"mean_commits":20.77777777777778,"dds":"0.19786096256684493","last_synced_commit":"70879fa6e13f1bafbe057147540dcdf711d0a2a6"},"previous_names":[],"tags_count":111,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bencripps%2Freact-redux-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bencripps%2Freact-redux-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bencripps%2Freact-redux-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bencripps%2Freact-redux-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bencripps","download_url":"https://codeload.github.com/bencripps/react-redux-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254553958,"owners_count":22090417,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["grid","grid-component","react","redux","tree"],"created_at":"2024-08-04T20:01:13.292Z","updated_at":"2025-05-16T15:07:52.000Z","avatar_url":"https://github.com/bencripps.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React-Redux Grid\n\n\u003ca href=\"https://tracking.gitads.io/?repo=react-redux-grid\"\u003e\u003cimg src=\"https://images.gitads.io/react-redux-grid\" alt=\"GitAds\"/\u003e\u003c/a\u003e\n\n[![npm version](https://badge.fury.io/js/react-redux-grid.svg)](https://badge.fury.io/js/react-redux-grid)\n[![Build Status](https://travis-ci.org/bencripps/react-redux-grid.svg?branch=master)](https://travis-ci.org/bencripps/react-redux-grid)\n[![Dependency Status](https://www.versioneye.com/user/projects/571b8782fcd19a0045441c8d/badge.svg?style=flat)](https://www.versioneye.com/user/projects/571b8782fcd19a0045441c8d)\n[![npm](https://img.shields.io/npm/dm/react-redux-grid.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/react-redux-grid)\n[![codecov](https://codecov.io/gh/bencripps/react-redux-grid/branch/master/graph/badge.svg)](https://codecov.io/gh/bencripps/react-redux-grid)\n[![Gitter](https://img.shields.io/gitter/room/bencripps/react-redux-grid.svg?maxAge=2592000)](https://gitter.im/bencripps/react-redux-grid)\n[![bitHound Dependencies](https://www.bithound.io/github/bencripps/react-redux-grid/badges/dependencies.svg)](https://www.bithound.io/github/bencripps/react-redux-grid/master/dependencies/npm)\n[![bitHound Overall Score](https://www.bithound.io/github/bencripps/react-redux-grid/badges/score.svg)](https://www.bithound.io/github/bencripps/react-redux-grid)\n[![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/bencripps/react-redux-grid/badges/quality-score.png?b=master)](https://scrutinizer-ci.com/g/bencripps/react-redux-grid/?branch=master)\n[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/bencripps/react-redux-grid.svg)](http://isitmaintained.com/project/bencripps/react-redux-grid \"Average time to resolve an issue\")\n[![Percentage of issues still open](http://isitmaintained.com/badge/open/bencripps/react-redux-grid.svg)](http://isitmaintained.com/project/bencripps/react-redux-grid \"Percentage of issues still open\")\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/bencripps/react-redux-grid/blob/master/docs/CONTRIBUTING.MD)\n\nA Grid and Tree Component written in [React](https://facebook.github.io/react) using the [Redux](https://github.com/rackt/redux) Pattern with plenty of open source [examples](http://react-redux-grid.herokuapp.com/), and an [interesting backstory](https://medium.com/@itsBenCripps/open-sourcing-a-redux-component-bb82f260ff62#.evnov65ui).\n\n![React Redux Grid](https://raw.githubusercontent.com/bencripps/react-redux-grid/master/demo/demo.gif)\n\n## Features\n\n-   Flat List or Tree Structure :heavy_minus_sign: :evergreen_tree:\n-   Local and/or Remote Data Source\n-   Local and/or Remote Pagination\n-   Extensive Column Definitions :muscle:\n-   Draggable Column Width/Resizing\n-   Draggable Column Ordering\n-   Sortable Columns\n-   Grid Action Menus\n-   Bulk Action Toolbar\n-   Selection Model (Single, MultiSelect, Checkbox)\n-   Event Handling for all kinds of DOM Events (List Below)\n-   Extendable and Modular Style Built with JavaScript :bowtie:\n-   Loading Mask\n-   Built-in Error Handling Module\n-   Handles Huge amount of Records (1000000+) :star:\n\n## Installation\n\n```bash\n$ npm install react-redux-grid --save\n```\n\nIf you would like to build and run the demo in your browser:\n\n```bash\n$ git clone https://github.com/bencripps/react-redux-grid.git\n$ cd react-redux-grid\n$ npm install\n$ npm run start\n```\n\nOpen your browser to: http://localhost:3000\n\n## Examples\n\n-   [Simple](http://react-redux-grid.herokuapp.com/Simple)\n-   [Complex](http://react-redux-grid.herokuapp.com/Complex)\n-   [Tree](http://react-redux-grid.herokuapp.com/Tree)\n-   [Stress](http://react-redux-grid.herokuapp.com/Stress)\n-   [Sticky](http://react-redux-grid.herokuapp.com/Sticky)\n-   [Bootstrap](http://react-redux-grid.herokuapp.com/Bootstrap)\n-   [Column Renderer](http://react-redux-grid.herokuapp.com/ColRenderer)\n-   [Editable](http://react-redux-grid.herokuapp.com/Editable)\n\n[Examples Github](https://github.com/bencripps/react-redux-grid-demo)\n\n## Usage\n\n```javascript\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport { Grid } from \"react-redux-grid\";\n\nrender(\n    \u003cGrid data={data} stateKey={stateKey} /\u003e,\n    document.getElementById(\"grid-mount\")\n);\n```\n\n## Documentation\n\n-   [Grid](#grid-level-parameters)\n-   [Columns](#columns)\n-   [Editor](#editor)\n-   [Column Manager](#column-manager)\n-   [Pagination](#pagination)\n-   [Row Actions](#grid-actions)\n-   [Actions](docs/USING_ACTIONS.md)\n-   [Bulk Selection](docs/USING_BULK_SELECTION.md)\n-   [Types](docs/USING_TYPES.md)\n-   [Error Handling](#error-handler)\n-   [Loading Mask](#loader)\n-   [Bulk Actions](#bulk-actions)\n-   [Eventing](#events)\n-   [Style](#style)\n\n## FAQ\n\n-   [How do I create a Tree Grid](https://github.com/bencripps/react-redux-grid/blob/master/docs/USING_TREE.md)\n-   [How do I import Grid Reducers](https://github.com/bencripps/react-redux-grid/blob/master/docs/USING_GRID_REDUCERS.md)\n-   [Is there more information on Column Renderers](https://github.com/bencripps/react-redux-grid/blob/master/docs/USING_CUSTOM_RENDERERS.md)\n-   [Is there more information on Column Editors](https://github.com/bencripps/react-redux-grid/blob/master/docs/USING_CUSTOM_EDITORS.md)\n-   [How do I enable the Sticky Header/Footer](https://github.com/bencripps/react-redux-grid/blob/master/docs/USING_STICKY.md)\n-   [How do I create Custom Pagination](https://github.com/bencripps/react-redux-grid/blob/master/docs/USING_CUSTOM_PAGER.md)\n-   [How is Font Awesome Incorporated](https://github.com/bencripps/react-redux-grid/blob/master/docs/USING_FONTS.md)\n\n## Grid Level Parameters\n\n| Prop             | Type                              | Description                                                                                                                                                     |\n| :--------------- | :-------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| stateful         | bool                              | the grid will store column configuration in browser local storage (based off of `stateKey`, so the key must be unique across all grids in a single application) |\n| height           | oneOfType([number, string, bool]) | the height of the grid container, if `false`, then no height will be set                                                                                        |\n| stateKey         | string                            | unique id for grid, [more information available](https://github.com/bencripps/react-redux-grid/blob/master/docs/STATE_KEYS.md)                                  |\n| showTreeRootNode | bool                              | used with tree-grid, to determine if root node should be displayed                                                                                              |\n| classNames       | array                             | a list of strings to be applied to the grid container as classes                                                                                                |\n| events           | object                            | grid event object, more information below                                                                                                                       |\n| reducerKeys      | object                            | object describing custom named reducers, more information below                                                                                                 |\n| pageSize         | int                               | number of records to shown on a single grid page                                                                                                                |\n| emptyDataMessage | any                               | can be a string or a react component, which will be displayed if no grid data is available                                                                      |\n| dragAndDrop      | bool                              | whether drag and drop of rows should be enabled                                                                                                                 |\n| gridType         | oneOf(['grid', 'tree'])           | whether the grid will be a flat list or a tree view                                                                                                             |\n| data             | arrayOf(object)                   | local data for grid to display, [more information available](https://github.com/bencripps/react-redux-grid/blob/master/docs/PROVIDING_DATA.md)                  |\n| dataSource       | func                              | function which returns data to display, [more information available](https://github.com/bencripps/react-redux-grid/blob/master/docs/PROVIDING_DATA.md)          |\n| filterFields     | object                            | optional object describing additional values to filter grid data                                                                                                |\n\n## Columns\n\n```javascript\nexport const columns = [\n    {\n        name: \"Name\",\n        dataIndex: \"name\",\n        editor: '\u003cinput type=\"text\" required /\u003e',\n        width: \"10%\",\n        className: \"additional-class\",\n        renderer: ({ column, value, row }) =\u003e \u003cspan\u003e Name: {value} \u003c/span\u003e,\n        hidden: false,\n        placeholder: \"Name\",\n        validator: ({ value, values }) =\u003e value.length \u003e 0,\n        change: ({ values }) =\u003e ({\n            otherColDataIndex: \"newValue\",\n        }),\n        editable: ({ value, values }) =\u003e {\n            if (value === \"ShouldDisabled\") {\n                return true;\n            }\n            return false;\n        },\n        hideable: false,\n        resizable: false,\n        moveable: false,\n        HANDLE_CLICK: () =\u003e {\n            console.log(\"Header Click\");\n        },\n        createKeyFrom: true,\n    },\n];\n```\n\n| Prop          | Type                       | Description                                                                                                                                                                                             |\n| :------------ | :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| name          | string                     | title of column to be displayed                                                                                                                                                                         |\n| dataIndex     | oneOfType([string, array]) | the key accessor for the column value (required parameter). [more information available](https://github.com/bencripps/react-redux-grid/blob/master/docs/USING_DATA_INDEX.md)                            |\n| editor        | jsx                        | when an editor is used, this element will be rendered in place of the edited cell, [more information available](https://github.com/bencripps/react-redux-grid/blob/master/docs/USING_CUSTOM_EDITORS.md) |\n| width         | int                        | width of column (if none is provided, a default width will be applied)                                                                                                                                  |\n| className     | array                      | additional class names to apply to header of this column                                                                                                                                                |\n| renderer      | func                       | a function which returns the cell contents for this column, [more information available](https://github.com/bencripps/react-redux-grid/blob/master/docs/USING_CUSTOM_RENDERERS.md)                      |\n| hidden        | bool                       | whether the column is hidden or visible                                                                                                                                                                 |\n| hideable      | bool                       | whether the column can be hidden                                                                                                                                                                        |\n| moveable      | bool                       | whether this column can be moved                                                                                                                                                                        |\n| placeholder   | string                     | the placeholder that will be used for the editor input                                                                                                                                                  |\n| validator     | func                       | a func that should return a boolean, to determine if the newly input value is valid                                                                                                                     |\n| change        | func                       | a func that should return an object where keys are the dataIndex of affected columns, and the values will be the new values associated with that dataIndex.                                             |\n| editable      | oneOfType([func, bool])    | whether the field should be disabled while in edit mode.                                                                                                                                                |\n| createKeyFrom | bool                       | see [full documentation on createKeyFrom](https://github.com/bencripps/react-redux-grid/blob/master/docs/CREATE_KEY_FROM.md)                                                                            |\n| sortFn        | func                       | when a local sort action occurs, you can provide a method that will be passed to [sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)                    |\n\n## Editor\n\n```javascript\nexport const plugins = {\n    EDITOR: {\n        type: \"inline\",\n        enabled: true,\n        focusOnEdit: true,\n    },\n};\n```\n\n| Prop        | Type                      | Description                                                                                                                           |\n| :---------- | :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------ |\n| type        | oneOf(['inline', 'grid']) | two editors are available by default. in grid mode, all fields are editable. in inline mode, only a single line is editable at a time |\n| enabled     | bool                      | if true, the grid will have an editor available                                                                                       |\n| focusOnEdit | bool                      | focus the first editable input when an edit event occurs (defaults to true)                                                           |\n\n## Column Manager\n\n```javascript\nexport const plugins = {\n    COLUMN_MANAGER: {\n        resizable: false\n        defaultColumnWidth: `${100 / columns.length}%`,\n        minColumnWidth: 10,\n        moveable: true,\n        headerActionItemBuilder: () =\u003e {},\n        sortable: {\n            enabled: true,\n            method: 'local',\n            sortingSource: 'http://url/to/sortingSource'\n        }\n    }\n}\n```\n\n| Prop                    | Type                       | Description                                                                                                                                  |\n| :---------------------- | :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------- |\n| resizable               | bool                       | will set all columns to resizable. This parameter will not override columns that have declared they are not resizable from the columns array |\n| defaultColumnWidth      | int                        | if no column width is provided, columns will be divided equally. this can be overwritten by providing a new string template                  |\n| minColumnWidth          | int                        | the minimum width a column can be dragged to                                                                                                 |\n| moveable                | bool                       | whether the columns can be reordered by drag                                                                                                 |\n| headerActionItemBuilder | func                       | build a custom jsx component to be used as the header action items                                                                           |\n| sortable                | object                     | an object that describes whether columns can be sorted                                                                                       |\n| sortable.enabled        | bool                       | an object that describes whether columns can be sorted                                                                                       |\n| sortable.method         | oneOf(['local', 'remote']) | whether sorting will execute locally, or remotely                                                                                            |\n| sortable.sortingSource  | string                     | where sorting data will be retrieved (a required parameter for remote sorting)                                                               |\n\n## Pagination\n\n```javascript\nexport const plugins = {\n    PAGER: {\n        enabled: true,\n        pagingType: \"remote\",\n        toolbarRenderer: (\n            pageIndex,\n            pageSize,\n            total,\n            currentRecords,\n            recordType\n        ) =\u003e {\n            return `${pageIndex * pageSize} through ${\n                pageIndex * pageSize + currentRecords\n            } of ${total} ${recordType} Displayed`;\n        },\n        pagerComponent: false,\n    },\n};\n```\n\n| Prop            | Type                       | Description                                                                                                 |\n| :-------------- | :------------------------- | :---------------------------------------------------------------------------------------------------------- |\n| enabled         | bool                       | whether a pager will be used, defaults to true                                                              |\n| pagingType      | oneOf(['local', 'remote']) | defaults to `local`                                                                                         |\n| toolbarRenderer | func                       | a function which which returns the description of the current pager state, ex: 'Viewing Records 10 of 100'  |\n| pagerComponent  | jsx                        | if you'd like to pass your own pager in, you can supply a jsx element which will replace the pager entirely |\n\n## Grid Actions\n\n```javascript\nexport const plugins = {\n    GRID_ACTIONS: {\n        iconCls: \"action-icon\",\n        onMenuShow: ({ columns, rowData }) =\u003e {\n            console.log(\"This event fires before menushow\");\n\n            if (rowData.isDisabled) {\n                return [\"menu-item-key\"]; // this field will now be disabled\n            }\n        },\n        menu: [\n            {\n                text: \"Menu Item\",\n                key: \"menu-item-key\",\n                EVENT_HANDLER: () =\u003e {\n                    alert(\"Im a menu Item Action\");\n                },\n            },\n        ],\n    },\n};\n```\n\n| Prop       | Type            | Description                                                                                                                                                                     |\n| :--------- | :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| iconCls    | string          | class to be used for the action icon                                                                                                                                            |\n| menu       | arrayOf(object) | menuItems, with `text`, `key`, `EVENT_HANDLER` properties. each object must contain a unique key relative to it's parent array. These keys will be used as the JSX element key. |\n| onMenuShow | func            | a method that fires upon menu action click. @return an array of `keys` to disable menu items that correspond with these keys.                                                   |\n\n## Selection Model\n\n```javascript\nexport const plugins = {\n    SELECTION_MODEL: {\n        mode: \"single\",\n        enabled: true,\n        editEvent: \"singleclick\",\n        allowDeselect: true,\n        activeCls: \"active-class\",\n        selectionEvent: \"singleclick\",\n    },\n};\n```\n\n| Prop           | Type                                                            | Description                                                           |\n| :------------- | :-------------------------------------------------------------- | :-------------------------------------------------------------------- |\n| mode           | oneOf(['single', 'multi', 'checkbox-single', 'checkbox-multi']) | determines whether a single value, or multiple values can be selected |\n| editEvent      | oneOf(['singleclick', 'doubleclick', 'none'])                   | what type of mouse event will trigger the editor                      |\n| enabled        | bool                                                            | whether the selection model class is initialized                      |\n| allowDeselect  | bool                                                            | whether a value can be deselected                                     |\n| activeCls      | string                                                          | the class applied to active rows upon selection                       |\n| selectionEvent | oneOf(['singleclick', 'doubleclick'])                           | the browser event which triggers the selection event                  |\n\n## Error Handler\n\n```javascript\nexport const plugins = {\n    ERROR_HANDLER: {\n        defaultErrorMessage: \"AN ERROR OCURRED\",\n        enabled: true,\n    },\n};\n```\n\n| Prop                | Type   | Description                                                                 |\n| :------------------ | :----- | :-------------------------------------------------------------------------- |\n| defaultErrorMessage | string | the default error message to display when no error information is available |\n| enabled             | bool   | whether the error handler should be initialized                             |\n\n## Loader\n\n```javascript\nexport const plugins = {\n    LOADER: {\n        enabled: true,\n    },\n};\n```\n\n| Prop    | Type | Description                                    |\n| :------ | :--- | :--------------------------------------------- |\n| enabled | bool | whether the loading mask should be initialized |\n\n## Bulk Actions\n\n```javascript\nexport const plugins = {\n    BULK_ACTIONS: {\n        enabled: true,\n        actions: [\n            {\n                text: \"Bulk Action Button\",\n                EVENT_HANDLER: () =\u003e {\n                    console.log(\"Doing a bulk action\");\n                },\n            },\n        ],\n    },\n};\n```\n\n| Prop    | Type            | Description                                                                              |\n| :------ | :-------------- | :--------------------------------------------------------------------------------------- |\n| enabled | bool            | whether the bulk action toolbar should be used                                           |\n| actions | arrayOf(object) | the actions (including button text, and event handler) that will be displayed in the bar |\n\n## Row renderer\n\n```javascript\nexport const plugins = {\n    ROW: {\n        enabled: true,\n        renderer: ({ rowProps, cells, row }) =\u003e {\n            return \u003ctr {...rowProps}\u003e{cells}\u003c/tr\u003e;\n        },\n    },\n};\n```\n\n| Prop     | Type | Description                                          |\n| :------- | :--- | :--------------------------------------------------- |\n| enabled  | bool | whether the bulk action toolbar should be used       |\n| renderer | func | function which returns the row contents for this row |\n\n## Events\n\nAll grid events are passed in as a single object.\n\n```javascript\nexport const events = {\n    HANDLE_CELL_CLICK: () =\u003e {},\n    HANDLE_CELL_DOUBLE_CLICK: () =\u003e {},\n    HANDLE_BEFORE_ROW_CLICK: () =\u003e {},\n    HANDLE_ROW_CLICK: () =\u003e {},\n    HANDLE_ROW_DOUBLE_CLICK: () =\u003e {},\n    HANDLE_BEFORE_SELECTION: () =\u003e {},\n    HANDLE_AFTER_SELECTION: () =\u003e {},\n    HANDLE_BEFORE_INLINE_EDITOR_SAVE: () =\u003e {},\n    HANDLE_AFTER_INLINE_EDITOR_SAVE: () =\u003e {},\n    HANDLE_BEFORE_BULKACTION_SHOW: () =\u003e {},\n    HANDLE_AFTER_BULKACTION_SHOW: () =\u003e {},\n    HANDLE_BEFORE_SORT: () =\u003e {},\n    HANLE_BEFORE_EDIT: () =\u003e {},\n    HANDLE_AFTER_SELECT_ALL: () =\u003e {},\n    HANDLE_AFTER_DESELECT_ALL: () =\u003e {},\n    HANDLE_AFTER_ROW_DROP: () =\u003e {},\n    HANDLE_BEFORE_TREE_CHILD_CREATE: () =\u003e {},\n    HANDLE_EDITOR_FOCUS: () =\u003e {},\n    HANDLE_EDITOR_BLUR: () =\u003e {},\n};\n```\n\nEach function is passed two arguments, the first is a context object which will contain metadata about the event, and the second argument is the browser event if applicable.\n\n```js\nHANDLE_CELL_CLICK = ({ row, rowId, rowIndex }, e) =\u003e {};\n```\n\n## Style\n\nAll core components and plugins have corresponding `.styl` files that can be extended or overwritten. Class names have also been modularized and are available to modify or extend within `src/constants/gridConstants.js`\n\nTo update `CLASS_NAMES` or the `CSS_PREFIX` dynamically, you can use the `applyGridConfig` function. More information is available [here](https://github.com/bencripps/react-redux-grid/blob/master/docs/USING_GRID_CONFIG.md).\n\n```javascript\nexport const CSS_PREFIX = \"react-grid\";\n\nexport const CLASS_NAMES = {\n    ACTIVE_CLASS: \"active\",\n    DRAG_HANDLE: \"drag-handle\",\n    SORT_HANDLE: \"sort-handle\",\n    SECONDARY_CLASS: \"secondary\",\n    CONTAINER: \"container\",\n    TABLE: \"table\",\n    HEADER: \"header\",\n    ROW: \"row\",\n    CELL: \"cell\",\n    PAGERTOOLBAR: \"pager-toolbar\",\n    EMPTY_ROW: \"empty-row\",\n    LOADING_BAR: \"loading-bar\",\n    DRAGGABLE_COLUMN: \"draggable-column\",\n    COLUMN: \"column\",\n    SORT_HANDLE_VISIBLE: \"sort-handle-visible\",\n    BUTTONS: {\n        PAGER: \"page-buttons\",\n    },\n    SELECTION_MODEL: {\n        CHECKBOX: \"checkbox\",\n        CHECKBOX_CONTAINER: \"checkbox-container\",\n    },\n    ERROR_HANDLER: {\n        CONTAINER: \"error-container\",\n        MESSAGE: \"error-message\",\n    },\n    EDITOR: {\n        INLINE: {\n            CONTAINER: \"inline-editor\",\n            SHOWN: \"shown\",\n            HIDDEN: \"hidden\",\n            SAVE_BUTTON: \"save-button\",\n            CANCEL_BUTTON: \"cancel-button\",\n            BUTTON_CONTAINER: \"button-container\",\n        },\n    },\n    GRID_ACTIONS: {\n        CONTAINER: \"action-container\",\n        SELECTED_CLASS: \"action-menu-selected\",\n        MENU: {\n            CONTAINER: \"action-menu-container\",\n            ITEM: \"action-menu-item\",\n        },\n    },\n    BULK_ACTIONS: {\n        CONTAINER: \"bulkaction-container\",\n        DESCRIPTION: \"bulkaction-description\",\n        SHOWN: \"shown\",\n        HIDDEN: \"hidden\",\n    },\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbencripps%2Freact-redux-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbencripps%2Freact-redux-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbencripps%2Freact-redux-grid/lists"}