@jsvision/datagrid / personalizeGrid
Function: personalizeGrid()
Documented in: Data Grid
personalizeGrid<
T>(grid,opts):Promise<PersonalizeResult>
Defined in: datagrid/src/personalize.ts:60
Open the "Personalize columns" modal over grid and resolve once the user closes it. On OK the pending layout is committed with grid.applyVariant; on Cancel/Esc the grid is left exactly as it was. The dialog ships no default keybinding — wire this to a menu item or a key of your choice.
Type Parameters
T
T
Parameters
grid
The grid to personalize.
opts
The variant store, the modal host, and an optional title.
Returns
Promise<PersonalizeResult>
{ ok: true } when the layout was committed, { ok: false } on Cancel/Esc.
Example
ts
import { resolveCapabilities } from '@jsvision/core';
import { createApplication, signal } from '@jsvision/ui';
import { column, fromRows, EditableDataGrid, personalizeGrid, createMemoryVariantStore } from '@jsvision/datagrid';
const caps = resolveCapabilities().profile; // ambient: reads process.env + process.platform
const app = createApplication({ caps });
interface Row { id: number; name: string }
const rows = signal<Row[]>([{ id: 1, name: 'Ada' }]);
const columns = [column({ id: 'name', title: 'Name', value: (r: Row) => r.name })];
const grid = new EditableDataGrid<Row>({ columns, source: fromRows(rows, { rowKey: (r) => r.id }) });
const store = createMemoryVariantStore(); // back it with a file/DB if you like
const { ok } = await personalizeGrid(grid, { store, host: app, title: 'Personalize columns' });
if (ok) {
// the grid already reflects the user's chosen layout
}