Never Propel Marmalade

    @unriddle/react-grid

    0.0.8 • Public • Published

    react-virtualized-simple-grid

    This is built upon React Virtualized by bvaughn

    Demo @ Codesandbox


    How to use

    import { Table } from "library-name";
    import { colDef, data } from "./somewhere";
    
    const App = () => <Table colDef={colDef} list={data} />;

    Step by step

    With this data below we want to have a table with id, name and age.

    Data:

    [
      {
        id: "1",
        name: "Steve",
        age: "29"
      },
      {
        id: "2",
        name: "Roger",
        age: "33"
      },
      {
        id: "3",
        name: "Sarah",
        age: "27"
      }
    ];

    For this to work we will have to create a column definition.

    Column Definition defines how we want to map the respective values from the data:

    const columnDefinition = [
      {
        key: "id",
        label: "Id",
        size: 50
      },
      {
        key: "name",
        label: "User Name",
        size: 150
      },
      {
        key: "age",
        label: "User Age",
        size: 50
      }
    ];

    As we can see from above it has three important characteristics: key, size and label.

    key Description required?
    key What key we want to map with from the data. YES
    size the size of the column YES
    label The label in the header that will be shown for the mapped value NO
    checkbox if we want to render checkboxes for a column NO
    component to render a custom component with the data NO

    Checkbox column and a custom component:

    export const customColDef = [
      {
        key: "checkbox",
        size: 50
      },
      {
        label: "Hotel",
        key: "hotel",
        size: 250,
        component: ({ rowData }) => {
          return <a href={rowData.link}>{rowData.hotel}</a>;
        }
      }
    ];

    Props

    key Description default
    list Your data.
    colDef Defines how to map the values into the grid
    fixedRowCount number
    fixedColumnCount number
    fixedHeight number
    fixedWidth number
    rowHeight number
    headerHeight number
    isBoxShadow boolean, true
    hoverOnX boolean false
    hoverOnY boolean false
    isZebra boolean false
    isSortOn boolean false
    isEditable boolean false
    onCellChange function callback with changed cell (only when using isEditable)
    onLabelClick function callback with clicked label info
    footer function example: lib/footer

    CSS Classes

    key Description
    Table has to be set on style prop
    Row .table--row-even .table--row-odd
    th .c-table--th
    td .c-table--td
    th when sorting (when active) .c-table--th-sort .c-table--th-sort-active
    sort icon button (when active) .c-sort-button .c-sort-button--active
    hover cell (when active) .c-table--td-hover-cell
    Fixed rows styles (when active) .c-table--top-left-grid .c-table--top-right-grid .c-table--bottom-left-grid .c-table--bottom-right-grid
    editable cell input (when active) .c-editable-cell--input
    sub header (when active) .c-table--sub-header .c-table--sub-header-title
    Checkbox (when active) .c-checkbox-cell .c-checkbox-cell--input id="c-checkbox-label-checkboxKey for="c-checkbox-label-checkboxKey

    Build


    npm run build

    Keywords

    none

    Install

    npm i @unriddle/react-grid

    DownloadsWeekly Downloads

    2

    Version

    0.0.8

    License

    none

    Unpacked Size

    53.1 kB

    Total Files

    4

    Last publish

    Collaborators

    • ajainvivek
    • azvivek