React-Redux Grid

A Grid and Tree Component written in React using the Redux Pattern with plenty of open source examples, and an interesting backstory.

Features

• Flat List or Tree Structure :heavy_minus_sign: :evergreen_tree:
• Local and/or Remote Data Source
• Local and/or Remote Pagination
• Extensive Column Definitions :muscle:
• Draggable Column Width/Resizing
• Draggable Column Ordering
• Sortable Columns
• Grid Action Menus
• Bulk Action Toolbar
• Selection Model (Single, MultiSelect, Checkbox)
• Event Handling for all kinds of DOM Events (List Below)
• Extendable and Modular Style Built with JavaScript :bowtie:
• Loading Mask
• Built-in Error Handling Module
• Handles Huge amount of Records (1000000+) :star:

Installation

$ npm install react-redux-grid --save

If you would like to build and run the demo in your browser:

$ git clone https://github.com/bencripps/react-redux-grid.git
$ cd react-redux-grid
$ npm install
$ npm run start

Open your browser to: http://localhost:3000

Examples

• Simple
• Complex
• Tree
• Stress
• Sticky
• Bootstrap
• Column Renderer
• Editable

Examples Github

Usage

import React from "react";
import { render } from "react-dom";
import { Grid } from "react-redux-grid";

render(
    <Grid data={data} stateKey={stateKey} />,
    document.getElementById("grid-mount")
);

Documentation

• Grid
• Columns
• Editor
• Column Manager
• Pagination
• Row Actions
• Actions
• Bulk Selection
• Types
• Error Handling
• Loading Mask
• Bulk Actions
• Eventing
• Style

FAQ

• How do I create a Tree Grid
• How do I import Grid Reducers
• Is there more information on Column Renderers
• Is there more information on Column Editors
• How do I enable the Sticky Header/Footer
• How do I create Custom Pagination
• How is Font Awesome Incorporated

Grid Level Parameters

Columns

export const columns = [
    {
        name: "Name",
        dataIndex: "name",
        editor: '<input type="text" required />',
        width: "10%",
        className: "additional-class",
        renderer: ({ column, value, row }) => <span> Name: {value} </span>,
        hidden: false,
        placeholder: "Name",
        validator: ({ value, values }) => value.length > 0,
        change: ({ values }) => ({
            otherColDataIndex: "newValue",
        }),
        editable: ({ value, values }) => {
            if (value === "ShouldDisabled") {
                return true;
            }
            return false;
        },
        hideable: false,
        resizable: false,
        moveable: false,
        HANDLE_CLICK: () => {
            console.log("Header Click");
        },
        createKeyFrom: true,
    },
];

Editor

export const plugins = {
    EDITOR: {
        type: "inline",
        enabled: true,
        focusOnEdit: true,
    },
};

Column Manager

export const plugins = {
    COLUMN_MANAGER: {
        resizable: false
        defaultColumnWidth: `${100 / columns.length}%`,
        minColumnWidth: 10,
        moveable: true,
        headerActionItemBuilder: () => {},
        sortable: {
            enabled: true,
            method: 'local',
            sortingSource: 'http://url/to/sortingSource'
        }
    }
}

Pagination

export const plugins = {
    PAGER: {
        enabled: true,
        pagingType: "remote",
        toolbarRenderer: (
            pageIndex,
            pageSize,
            total,
            currentRecords,
            recordType
        ) => {
            return `${pageIndex * pageSize} through ${
                pageIndex * pageSize + currentRecords
            } of ${total} ${recordType} Displayed`;
        },
        pagerComponent: false,
    },
};

Grid Actions

export const plugins = {
    GRID_ACTIONS: {
        iconCls: "action-icon",
        onMenuShow: ({ columns, rowData }) => {
            console.log("This event fires before menushow");

            if (rowData.isDisabled) {
                return ["menu-item-key"]; // this field will now be disabled
            }
        },
        menu: [
            {
                text: "Menu Item",
                key: "menu-item-key",
                EVENT_HANDLER: () => {
                    alert("Im a menu Item Action");
                },
            },
        ],
    },
};

Selection Model

export const plugins = {
    SELECTION_MODEL: {
        mode: "single",
        enabled: true,
        editEvent: "singleclick",
        allowDeselect: true,
        activeCls: "active-class",
        selectionEvent: "singleclick",
    },
};

Error Handler

export const plugins = {
    ERROR_HANDLER: {
        defaultErrorMessage: "AN ERROR OCURRED",
        enabled: true,
    },
};

Loader

export const plugins = {
    LOADER: {
        enabled: true,
    },
};

Bulk Actions

export const plugins = {
    BULK_ACTIONS: {
        enabled: true,
        actions: [
            {
                text: "Bulk Action Button",
                EVENT_HANDLER: () => {
                    console.log("Doing a bulk action");
                },
            },
        ],
    },
};

Row renderer

export const plugins = {
    ROW: {
        enabled: true,
        renderer: ({ rowProps, cells, row }) => {
            return <tr {...rowProps}>{cells}</tr>;
        },
    },
};

Events

All grid events are passed in as a single object.

export const events = {
    HANDLE_CELL_CLICK: () => {},
    HANDLE_CELL_DOUBLE_CLICK: () => {},
    HANDLE_BEFORE_ROW_CLICK: () => {},
    HANDLE_ROW_CLICK: () => {},
    HANDLE_ROW_DOUBLE_CLICK: () => {},
    HANDLE_BEFORE_SELECTION: () => {},
    HANDLE_AFTER_SELECTION: () => {},
    HANDLE_BEFORE_INLINE_EDITOR_SAVE: () => {},
    HANDLE_AFTER_INLINE_EDITOR_SAVE: () => {},
    HANDLE_BEFORE_BULKACTION_SHOW: () => {},
    HANDLE_AFTER_BULKACTION_SHOW: () => {},
    HANDLE_BEFORE_SORT: () => {},
    HANLE_BEFORE_EDIT: () => {},
    HANDLE_AFTER_SELECT_ALL: () => {},
    HANDLE_AFTER_DESELECT_ALL: () => {},
    HANDLE_AFTER_ROW_DROP: () => {},
    HANDLE_BEFORE_TREE_CHILD_CREATE: () => {},
    HANDLE_EDITOR_FOCUS: () => {},
    HANDLE_EDITOR_BLUR: () => {},
};

Each 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.

HANDLE_CELL_CLICK = ({ row, rowId, rowIndex }, e) => {};

Style

All 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

To update CLASS_NAMES or the CSS_PREFIX dynamically, you can use the applyGridConfig function. More information is available here.

export const CSS_PREFIX = "react-grid";

export const CLASS_NAMES = {
    ACTIVE_CLASS: "active",
    DRAG_HANDLE: "drag-handle",
    SORT_HANDLE: "sort-handle",
    SECONDARY_CLASS: "secondary",
    CONTAINER: "container",
    TABLE: "table",
    HEADER: "header",
    ROW: "row",
    CELL: "cell",
    PAGERTOOLBAR: "pager-toolbar",
    EMPTY_ROW: "empty-row",
    LOADING_BAR: "loading-bar",
    DRAGGABLE_COLUMN: "draggable-column",
    COLUMN: "column",
    SORT_HANDLE_VISIBLE: "sort-handle-visible",
    BUTTONS: {
        PAGER: "page-buttons",
    },
    SELECTION_MODEL: {
        CHECKBOX: "checkbox",
        CHECKBOX_CONTAINER: "checkbox-container",
    },
    ERROR_HANDLER: {
        CONTAINER: "error-container",
        MESSAGE: "error-message",
    },
    EDITOR: {
        INLINE: {
            CONTAINER: "inline-editor",
            SHOWN: "shown",
            HIDDEN: "hidden",
            SAVE_BUTTON: "save-button",
            CANCEL_BUTTON: "cancel-button",
            BUTTON_CONTAINER: "button-container",
        },
    },
    GRID_ACTIONS: {
        CONTAINER: "action-container",
        SELECTED_CLASS: "action-menu-selected",
        MENU: {
            CONTAINER: "action-menu-container",
            ITEM: "action-menu-item",
        },
    },
    BULK_ACTIONS: {
        CONTAINER: "bulkaction-container",
        DESCRIPTION: "bulkaction-description",
        SHOWN: "shown",
        HIDDEN: "hidden",
    },
};