FreeGridv1.15.1한국어

TypeScript: typed rows

createGrid<Order>() and ColumnDef<Order> type the rows: field names and nested paths are completed and checked, row callbacks and API methods use your type.

The types come with the package. Rows are loose objects by default, so any field name is accepted. Give the grid your row type and the editor completes field names, catches typos and types every callback.

import { createGrid, type ColumnDef } from '@freegridjs/core';

interface Order {
  id: number;
  customer: { name: string; address?: { city: string } };
  total: number;
  placedAt: Date;
}

const columns: ColumnDef<Order>[] = [
  { field: 'id', type: 'number' },
  { field: 'customer.address.city', editable: true },     // nested paths complete too
  { field: 'total', type: 'number', valueFormatter: p => `${p.formatted} (${p.row?.customer.name})` },
  { field: 'placedAt', type: 'date', validate: (v, row) => (row.total > 0 ? true : 'Empty order') },
  // { field: 'totl' }   ← error: not a field of Order
];

const grid = createGrid<Order>(el, { columns, data: orders, getRowId: o => String(o.id) });

const o = grid.getRowById('7');          // Order | undefined
const shown: Order[] = grid.getDisplayedRows();

What is typed

PlaceWith Order
fieldThe keys of Order and their paths three levels deep ('customer.address.city'); Dates and arrays are values, not paths
Column callbacksvalueGetter, valueFormatter, valueParser, renderer, cellClass, tooltip, validate, editable, button, link, comparator, rowSpan get row: Order
Grid optionsdata, getRowId, rowStyle, rowClass, detailRenderer, detailExpanded, isRowSelectable, getRowHeight, pinned rows
APIgetData, getSelectedRows, getRowById, getDisplayedRows, forEachRow, addRows, getModifiedRows… use Order
EventsEvent rows stay loose objects; annotate them where you need to (e.row as Order)

Only when you ask

The row type comes only from createGrid<Order>(…); it is never guessed from data. Existing code such as const api: GridApi = createGrid(el, { data: [...] }) keeps compiling, and a column with a field the data literal happens to lack is not an error.

In React, Vue, Svelte and Angular

The components take typed columns as they are. Type the column list where you write it, and the API you get from the ref or ready event:

import { FreeGrid } from '@freegridjs/react';
import type { ColumnDef, GridApi } from '@freegridjs/core';

const columns: ColumnDef<Order>[] = [{ field: 'customer.name' }, { field: 'total', type: 'number' }];

function Orders({ orders }: { orders: Order[] }) {
  const grid = useRef<GridApi<Order> | null>(null);
  return <FreeGrid ref={grid} columns={columns} data={orders} getRowId={(o: Order) => String(o.id)} />;
}

FieldOf<Order> and FieldPath<Order> are exported if you want the list of paths in your own code, for example for a column picker.

Questions about this page

Does FreeGrid have TypeScript types?

Yes, they ship with the package. Without a type argument rows are loose objects, as before; with createGrid<Order>() and ColumnDef<Order>[] the field names are checked and callbacks get Order.