fancygrid-react
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.20 • Public • Published

    FancyGrid-React

    A React Component for FancyGrid

    Quickly create dynamic JavaScript grids that react when your data changes by utilizing the FancyGrid library and Facebook's React together.

    Resources:

    Quick Start

    Install

    npm install fancygrid-react
    

    Usage

    The FancyGrid-React Component exposes 3 components.

    • Grid
    • Form
    • Tab

    Components

    All components are wrappers around the entire widgets of FancyGrid.
    The simplest one approach is to use config with widget options.

    import {Grid, Fancy, Form, Tab} from 'fancygrid-react';
     
    ...
    const getFancyGrid = () => {
      return (
        <div style={{marginTop: '5px'}}>
          <Form
            id={'myForm'}
            theme={'extra-gray'}
            title={'Form'}
            items={[{
              name: 'id',
              type: 'hidden'
            },{
              label: 'Name',
              emptyText: 'Name',
              name: 'name'
            },{
              label: 'SurName',
              emptyText: 'SurName',
              name: 'surname'
            }]}
            buttons={[{
              text: 'Save',
              handler: () => {
                let grid = Fancy.getGrid('myGrid'),
                  form = Fancy.getForm('myForm'),
                  values = form.get(),
                  id = values.id;
     
                grid.setById(id, values);
                grid.update({
                  type: 'row'
                });
              }
            }]}>
          </Form>
          <Grid
            id={'myGrid'}
            height={500}
            theme={'extra-gray'}
            exporter={true}
            selModel={{
              activeCell: true,
              type: 'rows'
            }}
            defaults={{
              resizable: true,
              menu: true
            }}
            events={[{
              selectrow: (grid, rowIndex, dataItem: any) => {
                let form = Fancy.getForm('myForm');
     
                form.set(dataItem.data);
              }
            }]}
            columns={getColumns()}
            data={getData()}>
          </Grid>
        </div>
      );
    }

    Install

    npm i fancygrid-react

    DownloadsWeekly Downloads

    78

    Version

    1.0.20

    License

    Commercial

    Unpacked Size

    14.8 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar