@mycrm-ui/react-table LLM Guide

9. Column Manager

This guide is for AI agents that need to configure column visibility, order, pinning, and resizing in @mycrm-ui/react-table.

Use this part when the user wants to hide/show columns, reorder them, pin them left/right, or resize widths.

Purpose

Treat these as separate state buckets:

• hiddenKeys
• order
• pinned
• widths

Required Inputs

Hidden Columns

const [hiddenKeys, setHiddenKeys] = useState<string[]>([]);

columnManager={{
  hiddenKeys,
  onHiddenKeysChange: setHiddenKeys,
}}

Order

const [order, setOrder] = useState<string[]>([]);

columnManager={{
  order,
  onOrderChange: setOrder,
}}

Pinning

const [pinned, setPinned] = useState<{ left?: string[]; right?: string[] }>({});

columnManager={{
  pinned,
  onPinnedChange: setPinned,
}}

Resize

const [widths, setWidths] = useState<Record<string, number>>({});

columnManager={{
  resizable: true,
  widths,
  onWidthChange: (colKey, width) =>
    setWidths((prev) => ({ ...prev, [colKey]: width })),
}}

Header Menu Entry

If columnManager is configured, a Column Manager entry is automatically added to the header menu.

Minimal Pattern

<Table
  columns={columns}
  data={rows}
  rowKey={(row) => String(row.id)}
  columnManager={{
    hiddenKeys,
    onHiddenKeysChange: setHiddenKeys,
    order,
    onOrderChange: setOrder,
    pinned,
    onPinnedChange: setPinned,
    resizable: true,
    widths,
    onWidthChange: (colKey, width) =>
      setWidths((prev) => ({ ...prev, [colKey]: width })),
  }}
/>

Common Mistakes

• wiring columnManager without connecting state
• using one array for pinning instead of { left, right }
• enabling resize without persisting widths