@jielga/tmdatagrid 2.0.0-beta.8 → 2.0.0

package/docs/column-layout.md

@@ -0,0 +1,182 @@
+# Visibility, pinning, ordering and size
+
+Four things a user can change about the layout of the grid, and one button that
+resets them. All four write state that
+[persists](/docs/use-tm-data-grid#persist) together, so a grid comes back
+arranged the way it was left. Each is also an item in the
+[column header menu](/docs/column-menu).
+
+```demo
+file: columns/ColumnLayout.tsx
+hint: Drag a header to reorder · pin or hide from a column menu · drag a divider to resize, or double-click it to fit the content.
+```
+
+## Hiding
+
+**Hide column** in any column menu, and the column chooser for the whole list at once: a search field, one checkbox per column, show/hide all, and **Reset layout**.
+The chooser is `TMDataGrid.Menu.Columns` in the [grid menu](/docs/menu), **Manage columns** in every column menu (a submenu of the same items), and `TMDataGrid.ColumnsPanel` as plain controls for a host that is not a menu.
+
+`enableHiding: false` removes all of it; on a column it removes that column's
+menu item and leaves it out of the panel, which lists what can be hidden and
+nothing else. Show/hide all covers the same list, so a column switched off this
+way keeps whatever visibility it was given. The state is TanStack's
+`columnVisibility`.
+
+The generated lanes are all `enableHiding: false` and never appear in the
+panel. Each follows the feature that adds it rather than a setting of its own.
+
+## Pinning
+
+**Pin to left** and **Pin to right** are in each column menu. The current
+position is marked, and choosing it again unpins. Pinned columns are sticky
+within the scroll container. The boundary is marked with a divider and a short
+gradient band, which fades in only while it is covering content.
+
+Headers, cells and grid tracks are ordered left, centre, right from the same
+source, so pinning does not change a column's position relative to its group.
+
+A pinned column also becomes fixed-width, since sticky offsets cannot be
+computed from an `fr` value. The grid writes the column's rendered width into
+`columnSizing` as it is pinned, so nothing jumps.
+
+To start pinned, set `initialState.columnPinning`. The slice is TanStack's
+full `ColumnPinningState`, so a partial does not compile - name both sides.
+A column pinned at mount has no rendered width to store, so it takes its
+`size` - TanStack's default of `150` where none is set - and `minSize` does
+not apply. Give such a column an explicit `size`:
+
+```tsx
+columnHelper.accessor("registration", { header: "Registration", size: 220 });
+
+initialState: { columnPinning: { start: ["registration"], end: [] } }
+```
+
+The generated lanes stay outside both pinned lanes: pinning a column right puts
+it to the left of the edit lane, so the row's Save, Cancel and Delete remain
+last in the row.
+
+## Ordering
+
+Drag a column header sideways to move it. The header being dragged dims, and a
+bar marks the edge the column will land against. **Move left** and **Move
+right** in the column menu do the same one step at a time, without a pointer.
+Both move the header, its cells and its filter entry together.
+
+```tsx
+const grid = useTMDataGrid({ data, columns, enableColumnOrdering: false });
+```
+
+`enableColumnOrdering` is defined by the grid rather than by TanStack, which
+ships the ordering state and APIs but no `enable` option. The per-column form is
+`meta.enableOrdering`.
+
+### Regions
+
+A column can only move **within its own pinned region**; a header in another
+region does not accept the drop. This follows TanStack's ordering pipeline:
+pinning splits the grid into left, centre and right, then `columnOrder`
+sequences the centre while `columnPinning.start` and `.end` sequence the
+pinned lanes. Unpin a column first to move it out of one.
+
+A neighbour that cannot be moved blocks the move; it is not stepped over. The
+checkbox column sets `meta.enableOrdering: false`, so nothing can be placed in
+front of it.
+
+Columns inside a header group cannot be moved either, in either direction:
+`columnOrder` sequences leaf columns, so moving one would leave the group header
+spanning columns that no longer belong to it.
+
+### Moving from your own code
+
+```tsx
+import { moveColumn, moveColumnByStep } from "@jielga/tmdatagrid";
+
+moveColumn({ table, columnId: "salary", targetId: "age", side: "before" });
+moveColumnByStep({ table, columnId: "salary", direction: 1 });
+```
+
+Both are no-ops for a move that is not allowed, including one across regions.
+`getStepTargetColumn({ table, columnId, direction })` returns the column a step
+would swap with, or `null` at the edge of a region. The menu items use it to
+decide whether to disable themselves.
+
+### State
+
+Ordering writes `columnOrder` as the **complete** leaf order, including hidden
+and pinned columns, so a column keeps its position when it is later shown or
+unpinned. Moving a pinned column also rewrites its `columnPinning` array. A
+column added to the definitions later is not in the stored order and is appended
+at the end until it is moved.
+
+## Sizing
+
+Columns are fluid by default. Each track is `minmax(minSize, flex fr)`.
+
+| Column option | Effect |
+| --- | --- |
+| `minSize` | Minimum width, and the column's contribution to the grid minimum width. Defaults to `80`. |
+| `meta.flex` | Share of the remaining width. Defaults to `1`. |
+| `minSize === maxSize` | Fixed width. The column is never fluid. |
+| `size` | Applied once the column becomes fixed by resizing or pinning. |
+
+Drag a divider to resize. A column switches to a fixed pixel width the moment
+it is resized or pinned, and the width is stored in `columnSizing`. The drag
+starts from the width the column is rendered with, and the grid paints it on
+its own column tracks while the pointer moves; the width reaches `columnSizing`
+when the pointer is released. `columnResizeMode: "onChange"` publishes it on
+every move instead, at the cost of a render of the grid for each one.
+
+### Autosizing
+
+Double-click a column's resize divider to size it to its widest mounted
+content. **Autosize column** in the column menu does the same without a
+pointer, and `meta.autoSize: true` runs it once after the first rows render,
+unless a persisted or user-set width already applies to the column.
+
+**Mounted content only.** Under virtualization the unmounted rows cannot be
+measured, so the width fits the visible window plus overscan. The result is
+clamped to `minSize`/`maxSize` and written into `columnSizing`, so it persists
+with the other widths and a later drag overrides it.
+
+`meta.autoSize` waits for content: on a grid whose rows are fetched, the first
+render has a header and no cells, so the column is sized on the render its
+first cells appear in.
+
+`autosizeColumn({ table, columnId, container })` is exported for menus and
+consumer code; `container` is the grid's scroll container, or any ancestor of
+the column's cells.
+
+## Reset the layout
+
+`resetSettings()` from the hook clears visibility, order, pinning and widths in
+one call. The columns panel offers it as **Reset layout**.
+
+```tsx
+const { resetSettings } = useTMDataGrid({ data, columns });
+```
+
+## Reference
+
+| Name | Kind | Type | Default | What it does |
+| --- | --- | --- | --- | --- |
+| `enableHiding` | Table option | `boolean` | `true` | Also a column option. `false` removes hiding entirely. |
+| `enableColumnPinning` | Table option | `boolean` | `true` | `false` removes the pin menu items. |
+| `enablePinning` | Column option | `boolean` | `true` | `false` for one column. |
+| `enableColumnOrdering` | Option | `boolean` | `true` | Header dragging and the move menu items. Grid-defined. |
+| `meta.enableOrdering` | Column meta | `boolean` | `true` | `false` keeps one column where it is. |
+| `enableColumnResizing` | Table option | `boolean` | `true` | `false` leaves the divider as a separator only. |
+| `enableResizing` | Column option | `boolean` | `true` | `false` for one column. |
+| `meta.flex` | Column meta | `number` | `1` | Share of the remaining width. |
+| `meta.autoSize` | Column meta | `boolean` | `false` | Autosize once, on the render the column's first cells appear in. |
+| `minSize` / `maxSize` / `size` | Column options | `number` | `80` / – / – | Width bounds, and the fixed width once one applies. |
+| `resetSettings` | Hook return | `() => void` | – | Clears visibility, order, pinning and widths. |
+| `moveColumn` | Export | `({ table, columnId, targetId, side }) => void` | – | Moves a column beside another. |
+| `moveColumnByStep` | Export | `({ table, columnId, direction }) => void` | – | Moves it one place. |
+| `MoveColumnArgs` · `ColumnStepArgs` | Types | – | – | What `moveColumn` takes, and what `moveColumnByStep` and `getStepTargetColumn` take. |
+| `TMDataGridDropSide` | Type | `"before" \| "after"` | – | The `side` of `MoveColumnArgs`: which edge of the target column the moved column lands on. |
+| `getStepTargetColumn` | Export | `(args) => Column \| null` | – | What a step would swap with, or `null` at a region edge. |
+| `keepGeneratedColumnsOutermost` | Export | `(columnPinning) => ColumnPinningState` | – | Puts the generated lanes back on the outside of both pinned lanes. The grid runs it after every pin. |
+| `getColumnRegion` | Export | `(columnPinning, columnId) => "start" \| "center" \| "end"` | – | Which pinned region a column is in. |
+| `TMDataGridColumnRegion` | Type | `"start" \| "center" \| "end"` | – | What `getColumnRegion` returns. |
+| `autosizeColumn` | Export | `({ table, columnId, container }) => void` | – | Fits a column to its mounted content. |
+| `TMDataGrid.Menu.Columns` · `TMDataGrid.ColumnsPanel` | Components | – | – | The column chooser, as menu items and as plain controls. See [Grid menu](/docs/menu). |

package/docs/column-menu.md

@@ -0,0 +1,66 @@
+# Column header menu
+
+The menu on every column header.
+It opens from the header's menu button and from a right-click on the header.
+
+```demo
+file: columns/ColumnMenuItems.tsx
+hint: The ID column has no menu; every other menu ends with Column statistics.
+```
+
+## Items
+
+The menu shows each group only when the column supports it:
+
+| Item | Shown when |
+| --- | --- |
+| Sort by ASC · Sort by DESC | The column can sort. See [Sorting](/docs/sorting) |
+| Filter | The column can filter and `filters.inHeader` is off. See [Filtering](/docs/filtering) |
+| Group by · Ungroup | The column can group. See [Grouping](/docs/grouping) |
+| Expand all groups · Collapse all groups | Grouping is active |
+| Pin to left · Pin to right · Unpin | The column can pin. Unpin only on a pinned column. See [Column layout](/docs/column-layout#pinning) |
+| Move left · Move right | The column can be reordered and has a neighbour in its region. See [Column layout](/docs/column-layout#ordering) |
+| Autosize column | The column can resize. See [Column layout](/docs/column-layout#autosizing) |
+| Hide column | The column can hide |
+| Manage columns | Any column can hide |
+
+A divider separates the groups.
+Each option that turns a feature off also removes its items; the full list is in [What each switch removes](/docs/use-tm-data-grid#what-each-switch-removes).
+A column whose menu would be empty has no menu button.
+Group headers and the generated columns (checkbox, details, edit, row number) have no menu.
+The item texts come from `labels`; see [Localization](/docs/localization).
+
+## Change the items
+
+`renderColumnMenuItems` on `TMDataGrid.Table` sets the contents of every column's menu.
+It receives the items the grid would render and returns the list to render:
+
+```tsx
+<TMDataGrid.Table<Employee>
+  renderColumnMenuItems={({ column, internalItems }) => [
+    ...internalItems,
+    <Menu.Divider key="stats-divider" />,
+    <Menu.Item key="stats" onClick={() => showStats(column.id)}>
+      Column statistics
+    </Menu.Item>,
+  ]}
+/>
+```
+
+- `internalItems` - the built-in items in order, dividers included
+- return `internalItems` unchanged to keep the default menu
+- add items around it to extend the menu
+- return other items to replace it
+- return `[]` to remove the menu button
+
+The function runs for every column that has a menu; branch on `column.id` for a per-column menu.
+A trailing divider is dropped.
+Give every item a `key`.
+
+## Reference
+
+| Name | Kind | Type | Default | What it does |
+| --- | --- | --- | --- | --- |
+| `renderColumnMenuItems` | Table prop | `TMDataGridColumnMenuItemsRenderer` | – | Sets the column menu's contents. An empty list removes the menu button. |
+| `TMDataGridColumnMenuItemsRenderer` | Type | `(args: TMDataGridColumnMenuItemsArgs) => ReactNode[]` | – | The function `renderColumnMenuItems` takes. |
+| `TMDataGridColumnMenuItemsArgs` | Type | `{ column, table, internalItems }` | – | What the function receives. |

package/docs/columns.md

@@ -0,0 +1,268 @@
+# Defining columns
+
+A column declares where its value comes from, what kind of value it is, and how
+to render it. Which filter operators it offers, which editor it opens and how
+it sorts all follow from `meta.type`.
+
+## The column helper
+
+`createTMDataGridColumnHelper<TData>()` returns a TanStack column helper bound
+to the grid's feature set, so that `meta` and `filterFn` are correctly typed.
+The `meta.options` and `meta.edit.enabled` callbacks receive rows typed as
+`TData`, so `row.original` needs no cast.
+
+```tsx
+const columnHelper = createTMDataGridColumnHelper<Employee>();
+
+const columns = columnHelper.columns([
+  columnHelper.accessor("salary", {
+    header: "Salary",
+    minSize: 130,
+    meta: { type: "number", align: "right" },
+    cell: (info) => formatSek(info.getValue()),
+  }),
+  columnHelper.accessor((row) => `${row.firstName} ${row.lastName}`, {
+    id: "fullName",
+    header: "Full name",
+    meta: { label: "Full name" },
+  }),
+]);
+```
+
+**Define columns at module scope.** A new array on every render rebuilds the
+table's column model and discards the user's column widths and order.
+
+```demo
+file: getting-started/ColumnDefinitions.tsx
+```
+
+An accessor may be a key of the row or a function over it. A function needs an
+explicit `id`, and a `meta.label` for the name shown in menus and the columns
+panel.
+
+A dotted `accessorKey` reads a nested field, and the column id it derives
+replaces the dots: `accessorKey: "address.city"` makes column id
+`address_city`, while the edit path stays `"address.city"`. Anything that
+addresses the column by id - `initialState`, `editing.columns`, `moveColumn`,
+a test selector - takes the underscore form; the dotted form silently matches
+nothing.
+
+### Columns derived from the other rows
+
+`accessorFn` is handed one row, so a value that depends on the rest - a share
+of a total, a rank, a running total - cannot be an accessor. Derive the
+collection once and hand the grid the finished shape; the column is then a
+plain `accessorKey`:
+
+```tsx
+const rows = useMemo(() => {
+  const total = holdings.reduce((sum, holding) => sum + holding.value, 0);
+
+  return holdings.map((holding) => ({
+    ...holding,
+    pctOfTotal: (holding.value / total) * 100,
+  }));
+}, [holdings]);
+
+columnHelper.accessor("pctOfTotal", {
+  header: "Share",
+  meta: { type: "number", align: "right" },
+  cell: (info) => `${info.getValue().toFixed(1)}%`,
+});
+```
+
+[A portfolio rebalancer](/docs/portfolio-rebalancer) works one through, from
+the derived rows to a validator that reads them all.
+
+## meta
+
+`meta` carries what a TanStack column definition has no field for. What the
+column is sits at the top level; what the filter panel and the edit engine do
+with it sits in the `filter` and `edit` namespaces.
+Its type is `TMDataGridColumnMeta`.
+
+| Field | Type | Default | Description |
+| --- | --- | --- | --- |
+| `label` | `string` | String header, or column id | Name used in menus and the column manager. Required when `header` is a component. |
+| `type` | `"string" \| "number" \| "boolean" \| "date" \| "select" \| "multiSelect"` | `"string"` | What the values are. Selects the filter operators, the filter control and the cell editor. |
+| `options` | `TMDataGridOptionsSource` | - | The choices of a `select` / `multiSelect` column. See [Options](#options). |
+| `flex` | `number` | `1` | Share of the remaining width. |
+| `align` | `"left" \| "right" \| "center"` | `"left"` | Alignment, applied to both header and cells. |
+| `autoSize` | `boolean` | `false` | Fit the column to its content once, on the render its first cells appear in. |
+| `enableOrdering` | `boolean` | `true` | `false` keeps the column where it is. |
+| `filter` | `TMDataGridColumnFilterOptions` | - | How this column filters. See [meta.filter](#metafilter). |
+| `edit` | `TMDataGridColumnEditOptions` | - | How this column is edited. See [meta.edit](#metaedit). |
+
+### meta.filter
+
+| Field | Type | Default | Description |
+| --- | --- | --- | --- |
+| `defaultOperator` | `TMDataGridFilterOperator` | The type's default | The operator a fresh filter starts with. See [Filtering](/docs/filtering#operators). |
+| `control` | `TMDataGridFilterControlComponent` | By type and operator | Replaces the filter panel's value control. See [Filtering](/docs/filtering#replacing-the-value-control). |
+
+```tsx
+meta: {
+  type: "number",
+  filter: { defaultOperator: "between", control: DgRangeSliderFilter },
+}
+```
+
+### meta.edit
+
+| Field | Type | Default | Description |
+| --- | --- | --- | --- |
+| `enabled` | `boolean \| (row) => boolean` | `true` | Whether cells in this column may be edited. See [Editing](/docs/editing#which-cells-edit). |
+| `field` | `string` | The `accessorKey` | The data path an edit writes to, for a column built on `accessorFn`. |
+| `editor` | `TMDataGridEditorComponent` | By `type` | Replaces the cell editor. See [Editors](/docs/editors#writing-your-own). |
+| `validate` | `TMDataGridFieldValidate` | - | Per-cell validation. See [Validation](/docs/editors#validation). |
+| `mapValue` | `TMDataGridEditValueMap` | - | Maps each value an editor writes. See [Mapping the value](/docs/editors#mapping-the-value-as-it-is-typed). |
+
+```tsx
+meta: {
+  type: "string",
+  edit: {
+    enabled: (row) => row.original.status !== "Terminated",
+    validate: z.string().min(2, "At least two characters"),
+    mapValue: ({ value }) =>
+      typeof value === "string" ? value.toUpperCase() : value,
+  },
+}
+```
+
+Omit both namespaces to get the defaults: any column mapping to a data path is
+editable once `editing` is set, and every column filters by its type.
+
+## Column types
+
+`meta.type` declares what a column's values are. The filter panel offers that
+type's operators and renders a matching value control: a date input for `date`,
+a Yes/No dropdown for `boolean`, a multi-select of the column's options for
+`select` and `multiSelect`. With editing on, the same declaration picks the
+editor.
+
+Dates may be `Date` instances or ISO `YYYY-MM-DD` strings in the data; the
+comparison is by calendar day either way, and filter values always travel as ISO
+strings. The date control is the native `<input type="date">`; `@mantine/dates`
+is not used.
+
+A column whose value is none of the six types - an object such as a
+`{ from, to }` range - renders through its own `cell`, but sorting, the filter
+panel and quick search operate on the raw value. Set `enableSorting`,
+`enableColumnFilter` and `enableGlobalFilter` to `false` on such a column.
+
+### Options
+
+`select` and `multiSelect` columns declare their choices once, in `meta.options`,
+and every consumer of them (the filter panel, the cell editor) reads the same
+source:
+
+```tsx
+// A fixed set, strings or full options:
+meta: {
+  type: "select",
+  options: [
+    "Pending",
+    { value: "Paid", label: "Paid in full", color: "green" },
+  ],
+}
+
+// The distinct values present in the data (low-cardinality columns):
+meta: { type: "select", options: "faceted" }
+
+// Computed. `row` is set when a cell editor asks and absent for the filter
+// panel, so row-dependent options can branch on it:
+meta: {
+  type: "select",
+  options: ({ row }) => (row ? citiesFor(row.original.country) : allCities),
+}
+```
+
+`resolveColumnOptions({ table, column, row? })` normalises all three forms and is
+exported for custom controls; `optionsToComboboxData` turns the result into what
+Mantine's `Select` and `MultiSelect` take, `group` fields included.
+
+A select column that declares no options still filters: the panel falls back to
+the faceted values. Mantine's dropdowns are not virtualized, so use the function
+form for very large sets.
+
+## Header groups
+
+`columnHelper.group` nests columns under a shared header. The group is a header
+row, not a column - the leaves keep all the behaviour. `columns` takes another
+`columnHelper.columns` call, not a bare array:
+
+```tsx
+columnHelper.group({
+  id: "person",
+  header: "Person",
+  columns: columnHelper.columns([
+    columnHelper.accessor("firstName", { header: "First" }),
+    columnHelper.accessor("lastName", { header: "Last" }),
+  ]),
+});
+```
+
+```demo
+file: getting-started/HeaderGroups.tsx
+hint: Sort, filter and resize the leaves; the group header follows them.
+```
+
+Columns inside a group cannot be reordered, regardless of `meta.enableOrdering`:
+`columnOrder` sequences leaf columns, so moving one would leave the group header
+spanning columns that no longer belong to it.
+
+## Per-column feature switches
+
+Standard TanStack column options. Each removes the corresponding interface for
+that column alone.
+
+| Option | Effect when `false` |
+| --- | --- |
+| `enableSorting` | No sort indicator and no sort menu items. See [Sorting](/docs/sorting). |
+| `enableColumnFilter` | No filter menu item, and no entry in the panel's column list. |
+| `enableHiding` | No hide menu item, and no checkbox in the column manager. |
+| `enablePinning` | No pin menu items. |
+| `enableResizing` | The divider stays as a separator but cannot be dragged. |
+| `meta.enableOrdering` | No header dragging and no move menu items. |
+
+Sizing, pinning, ordering and visibility are covered on
+[Visibility, pinning, ordering and size](/docs/column-layout).
+
+## The generated columns
+
+Five lanes the grid adds when a feature needs them. All are **system lanes**:
+fixed width, no column menu, no resize handle, never exported, never hidden and
+never listed in the columns panel.
+
+| Id | Appears when | Where |
+| --- | --- | --- |
+| `ROW_NUMBER_COLUMN_ID` | `enableRowNumbers` | Outermost left, before everything. See [Row pinning and numbering](/docs/row-pinning#numbering-rows). |
+| `SELECT_COLUMN_ID` | A checkbox selection mode | First, pinned left. See [Row selection](/docs/row-selection). |
+| `GROUP_COLUMN_ID` | A column is grouped | Front, beside the checkbox lane. See [Grouping](/docs/grouping). |
+| `DETAILS_COLUMN_ID` | `renderDetails` is set | Left, after checkbox and tree. See [Row details](/docs/row-details). |
+| `EDIT_COLUMN_ID` | `editing.mode: "row"`, `editing.draft`, or `editing.onRowDelete` | Appended, pinned right, and stays outside anything the user pins right. See [Editing](/docs/editing). |
+
+The checkbox lane cannot be moved: it anchors the left pinned region, and no
+column can be placed in front of it.
+
+## Reference
+
+| Name | Kind | Type | Default | What it does |
+| --- | --- | --- | --- | --- |
+| `createTMDataGridColumnHelper` | Export | `<TData>() => TMDataGridColumnHelper<TData>` | – | A TanStack column helper typed against the grid's features, with `meta` callbacks typed against `TData`. |
+| `TMDataGridColumnHelper` | Type | – | – | The helper's type. |
+| `TMDataGridColumnMeta` | Type | – | – | The type of `meta`. Typed against the row when the column is declared with `createTMDataGridColumnHelper`. |
+| `TMDataGridRowData` | Type | `Record<string, unknown>` | – | The row type where none is given: the default `TData` of the column meta types, and the rows `useTMDataGridContext` returns. |
+| `meta.label` | Column meta | `string` | Header or id | Name in menus and the columns panel. |
+| `meta.type` | Column meta | six types | `"string"` | What the values are; drives filters and editors. |
+| `TMDataGridColumnType` | Type | – | – | The six values of `meta.type`. |
+| `meta.options` | Column meta | array \| `"faceted"` \| `(args) => …` | – | The choices of an option column. |
+| `TMDataGridOptionsArgs` | Type | – | – | What a `meta.options` function receives: `{ table, column, row? }`. `row` is absent when the filter panel asks. |
+| `meta.align` | Column meta | `"left" \| "right" \| "center"` | `"left"` | Header and cell alignment. |
+| `meta.filter` | Column meta | `TMDataGridColumnFilterOptions` | – | How the column filters: `defaultOperator`, `control`. |
+| `meta.edit` | Column meta | `TMDataGridColumnEditOptions` | – | How the column edits: `enabled`, `field`, `editor`, `validate`, `mapValue`. |
+| `resolveColumnOptions` | Export | `({ table, column, row? }) => options` | – | Normalises all three `meta.options` forms. |
+| `optionsToComboboxData` | Export | `(options) => ComboboxData` | – | Options as Mantine `Select` data. |
+| `getColumnLabel` · `getColumnType` · `isControlColumn` | Exports | `(column) => …` | – | How the built-in controls read a column. |
+| `isGeneratedColumn` | Export | `(columnId) => boolean` | – | Whether the grid generated the column - the four control lanes plus the tree column. |
+| `SELECT_COLUMN_ID` · `GROUP_COLUMN_ID` · `DETAILS_COLUMN_ID` · `EDIT_COLUMN_ID` · `ROW_NUMBER_COLUMN_ID` | Exports | `string` | – | Ids of the five generated lanes. |