rx-datatable API
    Preparing search index...

    Interface DataTableCellConfig<T, TRow, ColName, ItemProps>

    Settings for rendering cells in a specific column, either for a specific type of row (if this object is in the map returned by the table's getRowConfig prop), or for all rows. This type is a subset of DataTableColumn. The most important properties are getValue and renderCell.

    interface DataTableCellConfig<
        T,
        TRow = T,
        ColName = string,
        ItemProps = DefaultRowProps,
    > {
        cellProps?: ItemProps | ((item: TreeItem<T, TRow>) => ItemProps);
        RenderCell?: ComponentType<DataTableCellProps<T, TRow, ColName, ItemProps>>;
        getColSpan?(
            node: TreeItem<T, TRow>,
            props: DataTableCellProps<T, TRow, ColName, ItemProps>,
        ): number | undefined;
        getValue?(
            this: DataTableColumn<T, TRow, ColName, ItemProps>,
            item: TRow,
            node: TreeItem<T>,
        ): any;
        renderCell?(
            node: TreeItem<T, TRow>,
            props: DataTableCellProps<T, TRow, ColName, ItemProps>,
        ): ReactNode;
    }

    Type Parameters

    • T

      is the union type of all rows in the DataTable or DataTableCore.

    • TRow = T

      is the type of row that the the current object is designed for.

    • ColName = string

      is the type of name and of ColName in the this passed to some functions

    • ItemProps = DefaultRowProps

      is the type of the cellProps property.

    Hierarchy (View Summary)

    Index
    cellProps? RenderCell?
    getColSpan? getValue? renderCell?
    cellProps?: ItemProps | ((item: TreeItem<T, TRow>) => ItemProps)

    Contains props to apply to each cell in this column (except to the standard header cell), or a function to get a set of props that depends on the current row.

    RenderCell?: ComponentType<DataTableCellProps<T, TRow, ColName, ItemProps>>

    This component is used to render a data cell. Usually it should be left undefined so that the DefaultDataTableCell component will be used. If you just want to add attributes to the <td> element, you can set cellProps instead.

    If you provide this prop, you are responsible for rendering the outer <td> element, and for using other relevant attributes of the column and the cell to produce output, such as:

    • Including cellProps and colSpan in your output, if applicable
    • Including the value of the cell (props.value) into the output
    • Rendering the tree indent if isTreeCol may be true, e.g. by calling props.renderTreeIndent?.() and including its output at the left edge of the cell.

    • This function allows you to cause this column to span multiple columns sometimes. If this function returns a value greater than one, the default row rendering code will skip rendering the spanned columns after this column (e.g. if it returns 3, the row renderer skips rendering two columns afterward) and the default cell renderer will set the colSpan prop on the td. If this function returns a value less than one, it's treated the same as one.

      Parameters

      Returns number | undefined

    • Provide this to customize the way that the value of this column is obtained from a row. If this is not provided, node.item[this.name.toString()] is used. The value obtained from this function is passed to the renderer via TableCellProps.

      The return type should be ReactNode if you don't provide renderCell or RenderCell, and string|number|boolean if you don't provide sorting properties such as getSortableValue or compare.

      If the table has a getRowConfig prop, it is called before getValue, both to determine what value of item will be passed to getValue, and also which getValue function will be called, in case you provide different getValue functions for different row types.

      As a case study, let's consider Date. Here are the main ways you might handle rendering and sorting for them:

      1. Convert the Date to a string in getValue, then provide a separate getSortableValue function that just returns the Date so that the column can be sorted correctly. In this case, you don't need to provide renderCell.
      2. Return the Date from getValue, then check in renderCell whether props.value is actually a Date and, if so, format it as a string or JSX there.
      3. Don't provide a getValue function at all, only a renderCell. In this case, name must refer to the property that contains the Date, and renderCell must convert the Date to a string or JSX.

      Parameters

      Returns any

    • This function is called to render a column value to a ReactNode, not including the outer <td> element. If not provided, defaultRenderCell is used.

      You must provide renderCell or RenderCell if the cell's value (determined by name or getValue) is not always a ReactNode (string, number, boolean or JSX).

      You can think of rendering customizations as a three-level hierarchy:

      1. getValue prop: in charge of selecting low-level cell content, such as a string, number, boolean or <span>. DefaultDataTableRow calls this function and stores the result in TableCellProps.value.
      2. renderCell prop: in charge of selecting the "main" cell content, such as a <div> element to control padding.
      3. RenderCell prop: the top level, in charge of rendering the entire cell including <td> and the tree indent (if any).

      In the simplest cases (e.g. string or boolean columns) you may not need to customize any of these, and in simple cases you only need to provide getValue. On the other end of the scale, you can provide RenderCell for maximum control. It is recommended that each level use the output of the previous level, i.e. RenderCell should get the "main" cell content by calling the function column.renderCell ?? defaultRenderCell, while renderCell should include props.value in its output. *

      Parameters

      Returns ReactNode

    Settings
    Member Visibility

    On This Page
    Properties
    Methods