is the union type of all row types in the DataTable or DataTableCore.
is normally just T, but when the table has a getRowConfig prop, the
configuration returned by that prop is combined with the information in the
original DataTableColumn<T,T> objects to produce a set of objects of type
DataTableColumn<T,TRow>.
is the type of the name property.
is the type of the headingProps and cellProps properties.
OptionalcellContains 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.
OptionalcompareA function to compare two values that were selected based on two rows of the table. The
a and b values passed to the comparer are the values returned by getSortableValue,
or by getValue if getSortableValue is not provided, or by using name to look up
the value of the column. If no compare function is provided, DataTableCore will
compare values using > and < operators instead.
For text columns, you should typically use compare: compareByLocale.
OptionalheadingThe label to show on the table heater. If this is missing, name is displayed.
OptionalheadingContains a style and/or className to apply to the heading cell.
See also DataTableCoreProps.headingRowProps.
Note: if you provide your own RenderHeading then this prop is only used if
your custom renderer uses it.
OptionalisTrue if this column is the "tree column" which is indented and has buttons to expand
and collapse items that have children. If and only if this property is truthy, a prop
called renderTreeIndent is provided to the cell renderer.
OptionalmaxMaximum width when user is resizing (default: unlimited)
The name property is used in the following ways.
heading or RenderHeading is provided, it is shown as the column headinggetValue is provided, name.toString() is treated as a property name
and used to get the value for this column on each data row.name.toString() is also used as the React key on the column headingIMPORTANT: name (if given) must be unique among columns in a table, because it is
used as a React key. If it isn't unique, columns with that name may glitch out by, for
example, being duplicated by React.
OptionalnoIf true, the resize cursor is not shown and the user cannot resize the column.
Note: columns also cannot be resized if they don't have a width value.
OptionalnoIf true, users cannot sort the column by clicking on the column heading and the
sort-direction icon (if any) is hidden. Sorting based on sortComparer and
columnsToSortBy still works.
OptionalRenderThis 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:
cellProps and colSpan in your output, if applicableprops.value) into the outputisTreeCol may be true, e.g. by calling
props.renderTreeIndent?.() and including its output at the left edge of the cell.OptionalRenderThis function is called to render a column header to a ReactNode. Your custom
component must include the outer <th> element, and is recommended to use
headingProps. *
OptionalwidthDefault or current column width. Columns require a numeric width to allow users to
resize (see also: noResize), but this prop is optional since the browser can choose a
width based on the headings row of the table. Providing a Holder allows you to get
the current width (in case the user resized it) or set the width dynamically.
OptionalclampA function to modify a proposed column width when user is resizing. If this is
not provided, a default minimum column width of 30 (or width, if less than 30) is
enforced. This function is called before enforcing maxWidth.
OptionalgetThis 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.
OptionalgetThis rarely-used prop provides full control over comparisons between items when sorting
this column. If you provide this, then getValue, getSortableValue and getComparer
are not called during the sorting process for this column.
OptionalgetWhen a user sorts a column by clicking it, normally the column is sorted by "value" of
the column (based on getValue or name). If you need sorting to be based on something
else, this property is the most convenient way to do it. See also: getComparer.
Note: this prop doesn't have a row-type-specific version, so if you provide it,
getRowConfig is not called as part of the sorting process.
OptionalgetProvide 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:
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.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.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.OptionalrenderThis 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:
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.renderCell prop: in charge of selecting the "main" cell content, such as a
<div> element to control padding.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.
*
Properties of a single column of a
<DataTable>. The most important properties arename,heading,getValue,widthandrenderCell.