Column types
Each col.type value and its UI behavior
Renderers live in ./ApiTables/general-components/ColumnCellTypes.tsx. Mapping happens in formatTableColumns() (./ApiTables/table-utils/utils.tsx).
If row[col.data_src] === null, the cell shows - regardless of type.
Reference table
type | Component / behavior | Notes |
|---|---|---|
text | TextCell | Plain text; values_formating maps values to styled spans (success, danger, info); hardcoded badges for CR, DR, approved, pending |
text_truncate | Inline <p> | truncateStart(value, 20, "...") — not a separate component |
link | LinkCell | linkStyle: text or button; Next.js Link; disabled when href is !#; optional showCopyBtn |
boolean | BooleanCell | Green/red Badge; labels from values_formating.trueLabel / falseLabel |
html | HTMLCell | Button opens modal → HTMLParsedModal via rowSelectedModal |
datalist / dataList | DataListCell | Expand button; array → DatalistModal, object → DatalistObjModal |
barcode | BarcodeCell | Base64 PNG in react-photo-view lightbox |
actions | TableRowActions | Only if row.actions has keys; isActionCol={true} |
Unknown types with no matching branch render nothing inside the non-null branch (effectively empty).
text
Use for most string/number fields.
values_formating example shape:
{
"active": { "showValue": "active", "style": "success" },
"inactive": { "showValue": "inactive", "style": "danger" }
}When row[data_src] matches showValue, a styled <span class="status ..."> is shown.
text_truncate
Same data as text but UI truncates to 20 characters with ... prefix preserved via truncateStart.
link
Cell value can be:
- A string URL
{ value, label }object
linkStyle === "text" uses label or linkText on the button. External navigation uses target="_blank".
boolean
Expects true / false in row[data_src]. Labels come from structure formatting, not raw booleans.
html
Stores HTML string in row data. User taps button → modal renders parsed HTML (sanitization depends on HTMLParsedModal implementation).
datalist / dataList
Value is array or object. Modal title uses column label. Used for nested line items, metadata blobs, etc.
barcode
Expects base64 image content in field. Tap to zoom (PhotoView).
actions
Structure defines an actions column; per-row row.actions is an object keyed by action id or column name.
Rendering delegates to Row actions. For per-column action maps, see actionsInRegularCells in Row actions overview.
Expanded rows
./ApiTables/core/ExpandedRow.tsx reuses the same cell components when expanding a row for detail view.