Have ideas to improve npm?Join in the discussion! »

    reactabular-dnd
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/reactabular-dnd package

    8.16.0 • Public • Published

    reactabular-dnd provides React DnD based helpers for Reactabular.

    Example:

    /*
    import React from 'react';
    import { DragDropContext } from 'react-dnd';
    import HTML5Backend from 'react-dnd-html5-backend';
    import cloneDeep from 'lodash/cloneDeep';
    import findIndex from 'lodash/findIndex';
    import * as Table from 'reactabular-table';
    import * as dnd from 'reactabular-dnd';
    import * as resolve from 'table-resolver';
    */
     
    const rows = [
      {
        id: 1,
        name: {
          first: 'John',
          last: 'Johnson'
        },
        company: 'John Inc.',
        sentence: 'consequatur nihil minima corporis omnis nihil rem'
      },
      {
        id: 2,
        name: {
          first: 'Mike',
          last: 'Mikeson'
        },
        company: 'Mike Inc.',
        sentence: 'a sequi doloremque sed id quo voluptatem voluptatem ut voluptatibus'
      },
      {
        id: 3,
        name: {
          first: 'Jake',
          last: 'Jackson'
        },
        company: 'Jake Inc.',
        sentence: 'sed id quo voluptatem voluptatem ut voluptatibus'
      },
      {
        id: 4,
        name: {
          first: 'Don',
          last: 'Donson'
        },
        company: 'Don Inc.',
        sentence: 'voluptatem voluptatem ut voluptatibus'
      }
    ];
     
    class DragAndDropTable extends React.Component {
      constructor(props) {
        super(props);
     
        this.state = {
          columns: [
            {
              props: {
                style: {
                  width: 100
                }
              },
              header: {
                label: 'Name',
                props: {
                  label: 'Name',
                  onMove: o => this.onMoveColumn(o)
                }
              },
              children: [
                {
                  property: 'name.first',
                  props: {
                    style: {
                      width: 50
                    }
                  },
                  header: {
                    label: 'First Name',
                    props: {
                      label: 'First Name',
                      onMove: o => this.onMoveChildColumn(o)
                    }
                  }
                },
                {
                  property: 'name.last',
                  props: {
                    style: {
                      width: 50
                    }
                  },
                  header: {
                    label: 'Last Name',
                    props: {
                      label: 'Last Name',
                      onMove: o => this.onMoveChildColumn(o)
                    }
                  }
                }
              ]
            },
            {
              property: 'company',
              props: {
                label: 'Company',
                style: {
                  width: 100
                }
              },
              header: {
                label: 'Company',
                props: {
                  onMove: o => this.onMoveColumn(o)
                }
              }
            },
            {
              property: 'sentence',
              props: {
                style: {
                  width: 300
                }
              },
              header: {
                label: 'Sentence',
                props: {
                  label: 'Sentence',
                  onMove: o => this.onMoveColumn(o)
                }
              }
            }
          ],
          rows
        };
     
        this.onRow = this.onRow.bind(this);
        this.onMoveRow = this.onMoveRow.bind(this);
        this.onMoveColumn = this.onMoveColumn.bind(this);
        this.onMoveChildColumn = this.onMoveChildColumn.bind(this);
      }
      render() {
        const renderers = {
          header: {
            cell: dnd.Header
          },
          body: {
            row: dnd.Row
          }
        };
        const { columns, rows } = this.state;
        const resolvedColumns = resolve.columnChildren({ columns });
        const resolvedRows = resolve.resolve({
          columns: resolvedColumns,
          method: resolve.nested
        })(rows);
     
        return (
          <Table.Provider
            renderers={renderers}
            columns={resolvedColumns}
          >
            <Table.Header
              headerRows={resolve.headerRows({ columns })}
            />
     
            <Table.Body
              rows={resolvedRows}
              rowKey="id"
              onRow={this.onRow}
            />
          </Table.Provider>
        );
      }
      onRow(row) {
        return {
          rowId: row.id,
          onMove: this.onMoveRow
        };
      }
      onMoveRow({ sourceRowId, targetRowId }) {
        const rows = dnd.moveRows({
          sourceRowId,
          targetRowId
        })(this.state.rows);
     
        if (rows) {
          this.setState({ rows });
        }
      }
      onMoveColumn(labels) {
        const movedColumns = dnd.moveLabels(this.state.columns, labels);
     
        if (movedColumns) {
          // Retain widths to avoid flashing while drag and dropping.
          const source = movedColumns.source;
          const target = movedColumns.target;
          const sourceWidth = source.props.style && source.props.style.width;
          const targetWidth = target.props.style && target.props.style.width;
     
          source.props.style = {
            ...source.props.style,
            width: targetWidth
          };
          target.props.style = {
            ...target.props.style,
            width: sourceWidth
          };
     
          this.setState({
            columns: movedColumns.columns
          });
        }
      }
      onMoveChildColumn(labels) {
        const movedChildren = dnd.moveChildrenLabels(this.state.columns, labels);
     
        if (movedChildren) {
          const columns = cloneDeep(this.state.columns);
     
          columns[movedChildren.target].children = movedChildren.columns;
     
          // Here we assume children have the same width.
          this.setState({ columns });
        }
      }
    }
     
    // Set up drag and drop context
    //const DragAndDrop = DragDropContext(HTML5Backend)(DragAndDropTable);
     
    <DragAndDropTable />

    Install

    npm i reactabular-dnd

    DownloadsWeekly Downloads

    932

    Version

    8.16.0

    License

    MIT

    Unpacked Size

    20.8 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar
    • avatar