Type Alias DataTableCoreProps<T, K, ColName, ItemProps>

Type Declaration

• columns: DataTableColumn<T, T, ColName, ItemProps>[]

  Describes each of the columns in this data table.

• OptionalcolumnsToSortBy?: WatchableArrayLike<[ColName, SortDirection]>

  Optional list of columns to sort by, where the first item of the list is the primary sort key. This is treated as mutable by DataTableCore, so by providing an observable array here, you can find out (as well as change) what sort order the user has chosen. So that changes (including the user clicking headings) cause a re-render of the table, this should be an array the reactivity adapter can track: a WatchableArray (from this package) with the default adapter, or a MobX observable.array with the MobX adapter.

  Example in function-style component:

   const [columnsToSortBy] = useState(() => WatchableArray.from(
     [['myColumn', SortDirection.Descending]]) as WatchableArray<[string, SortDirection]>);
  
   return <DataTable list={...} columns={...} columnsToSortBy={columnsToSortBy}/>
  

• OptionalfooterRows?: T[]

  Optional footer rows that will be rendered underneath all other rows.

• OptionalheaderRows?: T[]

  Optional additional header rows that will be rendered underneath the normal header row.

• OptionalheadingRowProps?: ItemProps

  Optional props to send to the renderer for the heading row (if there is one). BTW: the inherited itemProps prop specifies props to use for each data row.

• OptionalnoHeader?: boolean

  If this is true, then no header row is included in the output. This allows you either to make a table without a header, or to provide a header manually, e.g.

   <table>
     <tr>
       <th colSpan={2}>Custom</th>
       <th colSpan={2}>Headings</th>
     </tr>
     <DataTableCore noHeader noTHeadBody list={L} columns={C}/>
   </table>
  

  NOTE: Column widths are controller by the header row, and don't work when using noHeader mode.

• OptionalnoStructureWrap?: boolean

  If this is true, the rows are not wrapped in <thead>, <tbody>, or <tfoot> elements.

• OptionalRenderCell?: React.ComponentType<DataTableCellProps<T, T, ColName, ItemProps>>

  Component type used to render the data cells (including <td> element). It is recommended to leave this undefined in order to use DefaultDataTableCell. This property can be overridden for specific columns in DataTableColumn. If you're using any tree columns, be sure to render the tree indent using props.renderTreeIndent?.() and include its output.

• OptionalRenderDataRow?: React.ComponentType<DataTableRowProps<T, K, ItemProps>>

  Component type used to render an entire row. The result must include the outer tr or div. If not provided, rows are rendered with DefaultDataTableRow.

• OptionalRenderHeading?: React.ComponentType<DataTableHeadingProps<T, ColName, ItemProps>>

  Component type used to render the heading cells (including <th> element). If not provided, headers are rendered with DefaultDataTableHeading. This property can be overridden for specific columns in DataTableColumn.

• OptionalRenderHeadingRow?: React.ComponentType<DataTableHeadingRowProps<ColName, ItemProps>>

  Component type used to render the header row. The result must include the outer tr or div but the <thead> is added by DataTableCore unless noTHeadBody. If not provided, the headings are rendered with DefaultDataTableHeadingRow.

• OptionaltbodyProps?: React.HTMLProps<HTMLTableSectionElement>

  Optional props to add to <thead> element. Ignored if noStructureWrap is true.

• OptionaltfootProps?: React.HTMLProps<HTMLTableSectionElement>

  Optional props to add to <tfoot> element. Ignored if noStructureWrap is true.

• OptionaltheadProps?: React.HTMLProps<HTMLTableSectionElement>

  Optional props to add to <thead> element. Ignored if noStructureWrap is true.

• Optionalvirtualize?: VirtualizationSettings<T>

  These settings enable virtualization, which speeds up table rendering by not rendering off-screen items.

• getRowConfig?: function

  • getRowConfig?(
        item: TreeItem<T>,
        rowType: RowType,
    ): nully | ItemAndColumns<T, any, ColName, ItemProps>

    If provided, this is called on each row to find out how that row should be rendered.

    Parameters

    • item: TreeItem<T>

      Row being rendered.

    • rowType: RowType

      Section of the table that is being rendered

    Returns nully | ItemAndColumns<T, any, ColName, ItemProps>

    The item to render (normally item.item) and the configuration of each column whose behavior you want to customize, or null/undefined to use the default configuration specified by columns. The return type is incorrect. The return type should actually be ItemAndColumns<T,TRow,ColName,ItemProps> | nully for some specific type TRow, but we could not find any way to express this in TypeScript.