react-digital-grid

    1.2.0 • Public • Published

    React Digital Grid

    Deploy Examples

    This is a React DataGrid / DataTable component with features like:

    • flexible formatting - Easily format columns with built-in classes: bold, italic, left, right, etc.. or totaly custom using your own written renderer functions.
    • skins - 3 skins available: default, classic and bootstrap. You can also write your own skin, it's all about writing your own css file.
    • pagination - Specify the total number of records, the page size and current page and paginator will automatically be rendered with links and actions for each page.
    • sorting - Just specify if a column is sortable and automatically you will be able to click on it (with proper UI) and have proper events attached.
    • expandable content - You want to have a show more... or [+] details feature on your rows? This is built-in and supports any kind of content, even another grid (sub-grid).
    • selection - If set, you are able to select one or multiple rows. You can also use Shift or Ctrl to multi-select.
    • events - You can specify what happens when you click on any of the cells in the grid. All data is available in the event parameters.

    Installing

    npm install --save react-digital-grid
    

    Basic usage

      import React from 'react';
      import { Grid, Column } from 'react-digital-grid';
      
      const Example = () => {
      
      // load your data here: data
      return (
        <Grid 
          data={data}
        > 
          <Column header='Id' className='left' field='guid' />
          <Column header='Name' className='bold' field='name' />
          <Column header='Company' className='bold' field='company' />
          <Column 
                header='Email' 
                field='email'
                renderer={item => {
                  return <a href={`mailto:${item.email}`}>{item.email}</a>;
                }}
          />
        </Grid>
        );
       };

    Demos available here

    A lot of examples available at: https://miscalencu.github.io/react-digital-grid/

    Parameters

    Parameter Description
    Basic
    loading Sets if the grid should display a loading indicator. Defaults to 'false'.
    data The data that the grid should display.
    keyField The field name of the data elements that represents a unique key.
    dataCount The total records of the grid. This is not the count of the 'data' array, but total records for all pages. Used by the paginator to calculate total pages.
    pageNr Curtent page to display. Used by the paginator render.
    pageSize Current number of items to display on a page. Used by the paginator render.
    orderBy Initial 'Order By' field.
    orderDir Initial 'Order Dir' field.
    onStateChange Callback method called when the state of the grid (page, order by, order dir, etc...) is changed. Parameterd: (pageSize, pageNr, orderBy, orderDir).
    Formatting
    skin Skin of the grid. Can be: 'default', 'classic', 'bootstrap' or 'none'. Defalts to 'default'.
    emptyText Text to be displayed when there is no data to available. Defaults to 'No data available'
    footerText Text to be displayed in the bottom of the grid. Defaults to '' (empty).
    className Additional className of the grid table. Defaults to '' (empty).
    classNamesRenderer Method to compute additional className for each row. Parameters: see row events parameters.
    onCellClick Callback method to be called (if set) when clicking a column value.
    emptyPlaceholder Text to be displayed in each grid cell if the content is empty.
    Selection
    isSelectable Sets if the grid is selectable. It true, rows can be (multi)selected. Defaults for 'false'.
    showSelectionInfo Sets if the selection info is displayed in the footer of the grid. Defaults for 'false'.
    onSelectionChange Callback method called when the selection of the rows changed. Parameters: (selectedKeys, selectedItems, selectedLast)
    Expandable
    isExpandable Sets if the grid is expandable. If 'true' will display in the first column a [+] sign that expands the current row. Defaults to 'false'.
    expandedRowContent Method used to generate the content of an expanded column. Parameters: (item)

    To be implemented

    • frozen rows / first row.
    • frozen columns / first column.
    • improve plugins so you can extend the grid functionalities with your own.

    Info

    Data in the examples was generated with https://www.json-generator.com/

    Install

    npm i react-digital-grid

    DownloadsWeekly Downloads

    2

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    7.36 kB

    Total Files

    3

    Last publish

    Collaborators

    • miscalencu