import React from "react"; import { XmDataGrid as XmDataGridElement, CustomEvent, } from "../lit/components/data-grid/index.js"; /** * A generic type for strongly typing custom events with their targets * @template T - The type of the event target (extends EventTarget) * @template D - The type of the detail payload for the custom event */ type TypedEvent = E & { target: T; }; /** `XmDataGrid` component event */ export type XmDataGridElementEvent = TypedEvent< XmDataGridElement, E >; export type { XmDataGridElement, CustomEvent }; export interface XmDataGridProps extends Pick< React.AllHTMLAttributes, | "children" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "title" | "translate" | "onClick" | "onFocus" | "onBlur" > { /** undefined */ loading?: boolean; /** undefined */ totals?: boolean; /** Grow the columns to fill the frame when the declared widths leave room to spare. Full page turns this on for as long as it is open, so the grid uses the screen it took; set it to keep the same behaviour in the card. */ fitColumns?: boolean; /** Stretch the frame to the host's full height instead of collapsing to the rows. A grid embedded in a flex column needs this to own its own scroll; full page turns it on regardless, for as long as it is open. */ fill?: boolean; /** Server/controlled mode (ADR 0042): the consumer owns search, sort and paging. The grid stops filtering and reordering `rows`, hands them to the table verbatim, and reports search and sort as intents only. Use it when the rows are a page of a larger set, or a shape a local pass would damage — a flattened hierarchy loses its children to either. */ server?: boolean; /** Make rows clickable — the table's `xm-data-table-row-click` is composed, so it surfaces on this element. */ rowClick?: boolean; /** Drop the whole toolbar. Each cluster below can also be dropped on its own — the toolbar belongs to the grid, so what it carries is per instance. */ toolbar?: boolean; /** undefined */ noSearch?: boolean; /** undefined */ noViews?: boolean; /** undefined */ noGrouping?: boolean; /** undefined */ noColumns?: boolean; /** undefined */ noDensity?: boolean; /** undefined */ noFullPage?: boolean; /** undefined */ pageSize?: XmDataGridElement["pageSize"]; /** undefined */ maxHeight?: XmDataGridElement["maxHeight"]; /** undefined */ totalsLabel?: XmDataGridElement["totalsLabel"]; /** Result count behind `rows` in server mode: the empty state, the search count and the table's paging are all derived from it, never `rows.length`. */ totalItems?: XmDataGridElement["totalItems"]; /** Column key whose value is a row's stable identity, handed to the table. */ rowKey?: XmDataGridElement["rowKey"]; /** Column key rows start grouped by, and what the default view restores to. The user can change it from the setup panel or a column's own menu. */ groupBy?: XmDataGridElement["groupBy"]; /** undefined */ emptyHeading?: XmDataGridElement["emptyHeading"]; /** undefined */ emptyText?: XmDataGridElement["emptyText"]; /** undefined */ searchPlaceholder?: XmDataGridElement["searchPlaceholder"]; /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */ className?: string; /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */ exportparts?: string; /** Used for labels to link them with their inputs (using input id). */ htmlFor?: string; /** Used to help React identify which items have changed, are added, or are removed within a list. */ key?: number | string; /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */ part?: string; /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */ ref?: React.Ref; /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */ tabIndex?: number; /** Marks a row as a group header that keeps its own cells, handed straight to the table — the group a consumer already owns, wearing the system's band. */ rowHeader?: XmDataGridElement["rowHeader"]; /** Column keys the "group rows" menu offers. Empty hides the grouping pane. */ groupable?: XmDataGridElement["groupable"]; /** Column the rows start sorted by, and what the default view restores to. The grid owns sort the way it owns every other column capability: the table is driven from here, so a saved view is a snapshot of grid state. */ sort?: XmDataGridElement["sort"]; /** Aggregate line for a group's header row, handed straight to the table. */ groupSummary?: XmDataGridElement["groupSummary"]; /** Fired when density, grouping, sort or any column state changes (`detail.layout`). */ onXmDataGridLayoutChange?: (event: XmDataGridElementEvent) => void; /** Fired when the active view changes or its layout drifts (`detail.view`, `detail.dirty`). */ onXmDataGridViewChange?: (event: XmDataGridElementEvent) => void; /** Fired when the search query changes (`detail.query`, `detail.matches`). */ onXmDataGridSearch?: (event: XmDataGridElementEvent) => void; } /** * * * ## Attributes & Properties * * Component attributes and properties that can be applied to the element or by using JavaScript. * * - `loading`: undefined * - `page-size`/`pageSize`: undefined * - `max-height`/`maxHeight`: undefined * - `totals-label`/`totalsLabel`: undefined * - `totals`: undefined * - `fit-columns`/`fitColumns`: Grow the columns to fill the frame when the declared widths leave room to * spare. Full page turns this on for as long as it is open, so the grid uses * the screen it took; set it to keep the same behaviour in the card. * - `fill`: Stretch the frame to the host's full height instead of collapsing to the * rows. A grid embedded in a flex column needs this to own its own scroll; * full page turns it on regardless, for as long as it is open. * - `server`: Server/controlled mode (ADR 0042): the consumer owns search, sort and * paging. The grid stops filtering and reordering `rows`, hands them to the * table verbatim, and reports search and sort as intents only. Use it when * the rows are a page of a larger set, or a shape a local pass would * damage — a flattened hierarchy loses its children to either. * - `total-items`/`totalItems`: Result count behind `rows` in server mode: the empty state, the search * count and the table's paging are all derived from it, never `rows.length`. * - `row-click`/`rowClick`: Make rows clickable — the table's `xm-data-table-row-click` is composed, * so it surfaces on this element. * - `row-key`/`rowKey`: Column key whose value is a row's stable identity, handed to the table. * - `group-by`/`groupBy`: Column key rows start grouped by, and what the default view restores to. * The user can change it from the setup panel or a column's own menu. * - `empty-heading`/`emptyHeading`: undefined * - `empty-text`/`emptyText`: undefined * - `search-placeholder`/`searchPlaceholder`: undefined * - `toolbar`: Drop the whole toolbar. Each cluster below can also be dropped on its own — * the toolbar belongs to the grid, so what it carries is per instance. * - `no-search`/`noSearch`: undefined * - `no-views`/`noViews`: undefined * - `no-grouping`/`noGrouping`: undefined * - `no-columns`/`noColumns`: undefined * - `no-density`/`noDensity`: undefined * - `no-full-page`/`noFullPage`: undefined * - `columns`: undefined (property only) * - `rows`: undefined (property only) * - `rowHeader`: Marks a row as a group header that keeps its own cells, handed straight to * the table — the group a consumer already owns, wearing the system's band. (property only) * - `groupable`: Column keys the "group rows" menu offers. Empty hides the grouping pane. (property only) * - `sort`: Column the rows start sorted by, and what the default view restores to. * The grid owns sort the way it owns every other column capability: the * table is driven from here, so a saved view is a snapshot of grid state. (property only) * - `groupSummary`: Aggregate line for a group's header row, handed straight to the table. (property only) * * ## Events * * Events that will be emitted by the component. * * - `xm-data-grid-layout-change`: Fired when density, grouping, sort or any column state changes (`detail.layout`). * - `xm-data-grid-view-change`: Fired when the active view changes or its layout drifts (`detail.view`, `detail.dirty`). * - `xm-data-grid-search`: Fired when the search query changes (`detail.query`, `detail.matches`). */ export const XmDataGrid: React.ForwardRefExoticComponent;