Nonstop Progressive Marxism

    react-data-grid-planyard
    TypeScript icon, indicating that this package has built-in type declarations

    7.0.0-beta.11-2 • Public • Published

    react-data-grid

    npm-badge type-badge size-badge codecov-badge ci-badge

    Features

    Links

    Install

    npm install react-data-grid

    react-data-grid is published as ECMAScript modules for evergreen browsers / bundlers, and CommonJS for server-side rendering / Jest.

    Quick start

    import DataGrid from 'react-data-grid';
    
    const columns = [
      { key: 'id', name: 'ID' },
      { key: 'title', name: 'Title' }
    ];
    
    const rows = [
      { id: 0, title: 'Example' },
      { id: 1, title: 'Demo' }
    ];
    
    function App() {
      return <DataGrid columns={columns} rows={rows} />;
    }

    API

    Components

    <DataGrid />

    Props
    columns: readonly Column<R, SR>[]

    See Column.

    An array describing the grid's columns.

    ⚠️ Passing a new columns array will trigger a re-render for the whole grid, avoid changing it as much as possible for optimal performance.

    rows: readonly R[]

    An array of rows, the rows data can be of any type.

    summaryRows?: Maybe<readonly SR[]>

    An optional array of summary rows, usually used to display total values for example.

    rowKeyGetter?: Maybe<(row: R) => K>

    A function returning a unique key/identifier per row. rowKeyGetter is required for row selection to work.

    import DataGrid from 'react-data-grid';
    
    interface Row {
      id: number;
      name: string;
    }
    
    function rowKeyGetter(row: Row) {
      return row.id;
    }
    
    function MyGrid() {
      return <DataGrid columns={columns} rows={rows} rowKeyGetter={rowKeyGetter} />;
    }

    💡 While optional, setting this prop is recommended for optimal performance as the returned value is used to set the key prop on the row elements.

    onRowsChange?: Maybe<(rows: R[], data: RowsChangeData<R, SR>) => void>

    A function receiving row updates. The first parameter is a new rows array with both the updated rows and the other untouched rows. The second parameter is an object with an indexes array highlighting which rows have changed by their index, and the column where the change happened.

    import { useState } from 'react';
    import DataGrid from 'react-data-grid';
    
    function MyGrid() {
      const [rows, setRows] = useState(initialRows);
    
      return <DataGrid columns={columns} rows={rows} onRowsChange={setRows} />;
    }
    rowHeight?: Maybe<number | ((args: RowHeightArgs<R>) => number)>

    Default: 35 pixels

    Either a number defining the height of row in pixels, or a function returning dynamic row heights.

    headerRowHeight?: Maybe<number>

    Default: 35 pixels

    A number defining the height of the header row.

    summaryRowHeight?: Maybe<number>

    Default: 35 pixels

    A number defining the height of summary rows.

    selectedRows?: Maybe<ReadonlySet<K>>
    onSelectedRowsChange?: Maybe<(selectedRows: Set<K>) => void>
    sortColumns?: Maybe<readonly SortColumn[]>
    onSortColumnsChange?: Maybe<(sortColumns: SortColumn[]) => void>
    defaultColumnOptions?: Maybe<DefaultColumnOptions<R, SR>>
    groupBy?: Maybe<readonly string[]>
    rowGrouper?: Maybe<(rows: readonly R[], columnKey: string) => Record<string, readonly R[]>>
    expandedGroupIds?: Maybe<ReadonlySet<unknown>>
    onExpandedGroupIdsChange?: Maybe<(expandedGroupIds: Set<unknown>) => void>
    onFill?: Maybe<(event: FillEvent<R>) => R>
    onCopy?: Maybe<(event: CopyEvent<R>) => void>
    onPaste?: Maybe<(event: PasteEvent<R>) => R>
    onRowClick?: Maybe<(row: R, column: CalculatedColumn<R, SR>) => void>
    onRowDoubleClick?: Maybe<(row: R, column: CalculatedColumn<R, SR>) => void>
    onScroll?: Maybe<(event: React.UIEvent<HTMLDivElement>) => void>
    onColumnResize?: Maybe<(idx: number, width: number) => void>
    cellNavigationMode?: Maybe<CellNavigationMode>
    enableVirtualization?: Maybe<boolean>
    components?: Maybe<Components<R, SR>>

    This prop can be used to override the internal components. The prop accepts an object of type

    interface Components<TRow, TSummaryRow> {
      sortIcon?: Maybe<ComponentType<SortIconProps>>;
      checkboxFormatter?: Maybe<
        | ForwardRefExoticComponent<CheckboxFormatterProps & RefAttributes<HTMLOrSVGElement>>
        | ComponentType<CheckboxFormatterProps>
      >;
      rowRenderer?: Maybe<ComponentType<RowRendererProps<TRow, TSummaryRow>>>;
      noRowsFallback?: Maybe<React.ReactNode>;
    }

    For example, the default <Row /> component can be wrapped via the rowRenderer prop to add context providers or tweak props

    import DataGrid, { Row, RowRendererProps } from 'react-data-grid';
    
    function MyRowRenderer(props: RowRendererProps<Row>) {
      return (
        <MyContext.Provider value={123}>
          <Row {...props} />
        </MyContext.Provider>
      );
    }
    
    function MyGrid() {
      return <DataGrid columns={columns} rows={rows} components={{ rowRenderer: MyRowRenderer }} />;
    }

    ⚠️ To prevent all rows from being unmounted on re-renders, make sure to pass a static or memoized component to rowRenderer.

    rowClass?: Maybe<(row: R) => Maybe<string>>
    direction?: Maybe<'ltr' | 'rtl'>

    This property sets the text direction of the grid, it defaults to 'ltr' (left-to-right). Setting direction to 'rtl' has the following effects:

    • Columns flow from right to left
    • Frozen columns are pinned on the right
    • Column resize handle is shown on the left edge of the column
    • Scrollbar is moved to the left
    className?: string | undefined
    style?: CSSProperties | undefined
    'aria-label'?: string | undefined
    'aria-labelledby'?: string | undefined
    'aria-describedby'?: string | undefined
    'data-testid'?: Maybe<string>

    <TextEditor />

    Props

    See EditorProps

    <Row />

    See components

    Props

    See RowRendererProps

    The ref prop is supported.

    <SortableHeaderCell />

    Props
    onSort: (ctrlClick: boolean) => void
    sortDirection: SortDirection | undefined
    priority: number | undefined
    isCellSelected: boolean
    children: React.ReactNode

    <ValueFormatter />

    Props

    See FormatterProps

    <SelectCellFormatter />

    Props
    value: boolean
    isCellSelected: boolean
    disabled?: boolean | undefined
    onChange: (value: boolean, isShiftClick: boolean) => void
    onClick?: MouseEventHandler<T> | undefined
    'aria-label'?: string | undefined
    'aria-labelledby'?: string | undefined

    <ToggleGroupFormatter />

    Props

    See GroupFormatterProps

    Hooks

    useRowSelection<R>(): [boolean, (selectRowEvent: SelectRowEvent<R>) => void]

    Other

    SelectColumn: Column<any, any>

    SELECT_COLUMN_KEY = 'select-row'

    Types

    Column

    DataGridHandle

    EditorProps

    FormatterProps

    GroupFormatterProps

    RowRendererProps

    Generics

    • R, TRow: Row type
    • SR, TSummaryRow: Summary row type
    • K: Row key type

    Install

    npm i react-data-grid-planyard

    DownloadsWeekly Downloads

    4

    Version

    7.0.0-beta.11-2

    License

    MIT

    Unpacked Size

    692 kB

    Total Files

    8

    Last publish

    Collaborators

    • toitsss