# TypeScript with the custom element The element is plain JavaScript at the boundary, so TypeScript needs to be told it exists. Two declarations get completion and checking back. ## Plain TypeScript The primitives worth declaring first - they are the ones you set most. > Live demo: Sort, filter, paginate - https://svgrid.com/demos/02-sort-filter-paginate/ Add the element to `HTMLElementTagNameMap`, so `getElementById` and `querySelector` return something typed: `Row` must extend `RowData` (`Record`), because that is the constraint `ColumnDef` and `SvGridApi` carry: ```ts // svgrid-elements.d.ts import type { ColumnDef, RowData, SvGridApi } from '@svgrid/grid' interface SvGridElement extends HTMLElement { data: readonly Row[] columns: ColumnDef[] api: SvGridApi // A few of the 72 primitives; add the ones you use. sortable: boolean filterable: boolean pageable: boolean pageSize: number showRowNumbers: boolean groupBy: readonly string[] } declare global { interface HTMLElementTagNameMap { 'sv-grid': SvGridElement 'sv-grid-shadow': SvGridElement } } // With that in scope, both of these are checked: const grid = document.querySelector('sv-grid')! grid.columns = [{ field: 'name', header: 'Name' }] grid.api.exportCsv() ``` The full property list is in the [reference](https://svgrid.com/docs/help/web-components/sv-grid/), which is generated from the grid's own `Props` type - copy the rows you need rather than trying to mirror all 98. ## JSX (React, Solid, Preact) JSX needs the tag registered separately, because intrinsic elements are a different map: ```tsx declare module 'react' { namespace JSX { interface IntrinsicElements { 'sv-grid': React.DetailedHTMLProps, HTMLElement> & { sortable?: boolean filterable?: boolean 'page-size'?: number } 'sv-grid-shadow': React.DetailedHTMLProps, HTMLElement> } } } ``` Attributes in JSX are strings, so only the primitives belong here. Arrays and objects go through a ref - see [React](https://svgrid.com/docs/help/web-components/react/). ## Typed events `cellvaluechange` fires here; the map below types its `detail`. > Live demo: Inline editing - https://svgrid.com/demos/05-inline-editing/ `CustomEvent.detail` is `any` by default. Declare the map once: ```ts interface SvGridEventMap { cellvaluechange: CustomEvent<{ rowIndex: number columnId: string oldValue: unknown newValue: unknown }> sortingchange: CustomEvent> rowselectionchange: CustomEvent<{ selection: Record; rows: unknown[] }> // `rowclick` carries the ROW, not the click event - see the reference. rowclick: CustomEvent> } declare global { interface HTMLElementEventMap extends SvGridEventMap {} } // `HTMLElement`, so addEventListener resolves against HTMLElementEventMap. // (`querySelector('sv-grid')` gives you an `Element` unless you also add the // HTMLElementTagNameMap declaration above.) const el: HTMLElement = document.createElement('sv-grid') el.addEventListener('cellvaluechange', (e) => { e.detail.newValue // typed }) ``` Every event's `detail` shape is listed in the [reference](https://svgrid.com/docs/help/web-components/sv-grid/); it is the corresponding callback's argument, verbatim, with two documented exceptions kept for backwards compatibility. ## Why these are not shipped A `.d.ts` in the package would have to be generated from the same source as the element, and kept correct across a version skew between `@svgrid/grid-wc` and whatever `@svgrid/grid` types a consumer has installed. Hand-copying the few props you use is more honest than a declaration file that can silently disagree with the element you loaded. ## See also - [`` reference](https://svgrid.com/docs/help/web-components/sv-grid/) - [React](https://svgrid.com/docs/help/web-components/react/) - where the typing matters most. --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/web-components/typescript/ . All docs: https://svgrid.com/llms.txt