Columns overview

How API column definitions become react-data-table-component columns

Columns are defined in the control table structure (structureColumns in tableCore). The UI never hardcodes column lists for production tables.

Pipeline

File: ./ApiTables/table-utils/utils.tsxformatTableColumns(cols, tbData)

Column definition fields (from API)

FieldRole
labelHeader text
data_srcRow field key
typeRenderer selector (see Column types)
sortableEnables server sort on header click
showableIf false, column excluded from table
values_formatingBadges / boolean labels (API spelling)
linkStyle, linkText, linkColor, showCopyBtnFor link type

Visibility

ColumnsVisibility filters formatted columns against visibleColumns. Toggle persists:

secure LS key: {tableName}_tb

Width calculation

  • Non-link, non-barcode: calculateColMinWidth from longest cell in data_src + header label (cap ~500px)
  • link, barcode: fixed ~250px
  • After each fetch, useTableFetcher may update widths with calculateMinWidth per row content

Actions column

Type actions renders TableRowActions when row.actions has keys. Structure may instead place actions under each column name (actionsInRegularCells).

Column modals (non-action)

Types html and datalist / dataList open modals via _setRowSelectedModal — routed in ./ApiTables/table-modals/ColumnsStaticModals.tsx inside ./ApiTables/table-modals/ApiTablesModals.tsx.

On this page