# gds-table

**Class**: `GdsTable`

**Tag**: `<gds-table>`


## Properties

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `headline` | `string \| undefined` | `-` | The main headline text displayed at the top of the table. |
| `headlineTag` | `string` | `-` | The HTML tag to use for the headline (e.g., 'h1', 'h2', etc.). |
| `summary` | `string \| undefined` | `-` | A brief description or summary displayed below the headline. |
| `searchLabel` | `string \| undefined` | `-` | The accessible label for the search input field. |
| `options` | `array` | `-` | Configurable options for rows per page. Accepts: number array (e.g., `[5, 10, 20, 50, 100]`) |
| `page` | `number` | `-` | Current page number in pagination. |
| `rows` | `number` | `-` | Number of rows displayed per page. |
| `columns` | `Types.Column[]` | `-` | Defines table column structure. Accepts: array of column configurations with keys, labels, etc. |
| `data` | `(request: Types.Request) => Promise<Types.Response<T>>` | `-` | Asynchronous data provider function. Accepts: function that returns Promise with rows and total count |
| `density` | `Types.Density` | `-` | Controls row density. Accepts: `comfortable`, `compact`, `spacious` |
| `selectable` | `boolean` | `-` | Enables row selection functionality. |
| `responsive` | `boolean` | `-` | Transforms table layout for mobile screens. |
| `plain` | `boolean` | `-` | Removes table header and footer. |
| `searchable` | `boolean` | `-` | Adds search input for data filtering. |
| `settings` | `boolean` | `-` | Enables column visibility settings. |
| `striped` | `boolean` | `-` | Applies alternating row background colors. |
| `actions` | `Types.Actions \| ((row: T, index: number) => any) \| undefined` | `-` | Defines row-level actions. Accepts: action configuration or custom rendering function |
| `nocache` | `boolean` | `-` | Disables data caching mechanism. |
| `dataLoadKey` | `string \| undefined` | `-` | Key to trigger data reloading when changed. Setting this to a new value forces the table to clear the cache and request new data from the data provider.  The value can be any string that is not equal to the previous value. |
| `height` | `string \| undefined` | `-` | Style Expression Property that controls the height property. Supports space tokens and all valid CSS width values.  Sets the height of the table content area and enables vertical scrolling with a sticky header that remains visible. |
| `variant` | `'primary' \| 'secondary' \| 'tertiary'` | `-` | Sets the visual variant of the table container card. Forwards to the underlying `gds-card` component. Accepts: `primary`, `secondary` (default), `tertiary`.  > Variant naming will change in the next major release. |


## Events

| Name | Type | Description |
|------|------|-------------|
| `gds-page-change` | `CustomEvent<any>` | Fired when the active page changes. Detail: `{ page: number }` |
| `gds-rows-change` | `CustomEvent<any>` | Fired when the rows per page value changes. Detail: `{ rows: number }` |
| `gds-sort-change` | `CustomEvent<any>` | Fired when sorting changes. Detail: `{ sortColumn: string, sortDirection: 'asc' \| 'desc' }` |
| `gds-table-data-loaded` | `CustomEvent<any>` | Fired when data is successfully loaded. |
| `gds-table-data-error` | `CustomEvent<any>` | Fired when data loading fails. |
| `gds-table-selection` | `CustomEvent<any>` | Fired when row selection changes. |


## Slots

| Name | Description |
|------|-------------|
| ``header-lead`` | Content displayed at the start of the table header (after search). |
| ``header-trail`` | Content displayed at the end of the table header (before settings). |
| ``error`` | Custom error state content when data loading fails. |
| ``empty`` | Custom empty state content when no data is available. |
| ``no-results`` | Custom no results content when search returns empty. |


## Methods

### `clearSelection(): void`

Public API
Clear all selections

### `selectAll(): void`

Select all rows

### `setSelection(indices: number[]): void`

Select specific rows by indices

**Parameters:**

- `indices`: `number[]`

### `getSelection(): { indices: number[]; data: T[] }`

Get selected row data
