eds-table

Explore the Interactive Component

Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.

See It in Use with Code

Check out the practical implementations of component.

Passing Data and Config as a JSON String (Plain HTML)

When you’re using the component directly in HTML (or in frameworks that don’t support property binding), you must pass the data and config as JSON strings:

The data and config attributes are a string. The getter will parse them into arrays of objects.

Using Table Actions

The eds-table component allows you to add actions to each row of your table. For example, you might need “View,” “Edit,” or “Delete” buttons for a row. By using the actions prop, you can configure the component to include these actions. See the example below.

Passing Data and Config as Objects (Using Property Binding)

In frameworks like React or Angular, you can take advantage of property binding to pass the data directly as an object:

In React

In Vue 3

Overview

EdsTable is a customizable data table component with support for dynamic data fetching, column configuration, pagination, and search functionality.

Key Features:

Configurable columns with options to hide or apply text formatting (uppercase, bold, code, or html).
Pagination support with adjustable rows per page.
Searchable content for easier data filtering.

Column Format Options:

‘uppercase’: Converts text to uppercase
‘bold’: Wraps text in tag
‘code’: Wraps text in tag
‘html’: Renders raw HTML content (use for web components, links, etc.)
‘svg’: (deprecated, use ‘html’) Renders raw HTML content

This component is versatile for displaying data with flexible configuration, and integrates with pagination and search functionalities.

`Properties`

Property	Attribute	Description	Type	Default
`actionTemplate`	–	Optional: allow the consumer to supply a full JSX render‐prop instead of simple name/label pairs. If provided, this takes priority.	`(row: any) => VNode`	`undefined`
`actions`	`actions`	Array of actions to render in each row. Can be passed as a JSON string or as a `TableAction[]`. Each action object may include: - `name` (string; required) — unique action key, e.g. `"view"`, `"delete"`. - `label` (string; required) — text shown on the button, or used as the tooltip/aria-label when icon-only. - `type` (“button” \| “checkbox”; optional) — whether to render a standard button (default) or a checkbox. - `icon` (string; optional) — name of the icon to display in icon-only mode. - `field` (string; optional) — for checkboxes, the row field whose truthiness binds the checked state (defaults to `name`). - `showLabel` (boolean; optional) — if `true`, render the full `label` instead of an icon + tooltip. - `intent` (“brand” \| “primary” \| “secondary” \| “neutral” \| “ghost” \| “brandInverse” \| “secondaryInverse” \| “ghostInverse”; optional) — button intent/style. When you pass JSON, make sure field names match exactly: `html actions='[ { "name":"view", "label":"View", "icon":"eye", "intent":"brand" }, { "name":"edit", "label":"Edit", "icon":"pencil", "showLabel":true, "intent":"primary" }, { "name":"del", "label":"Delete","type":"checkbox", "field":"selected" } ]'`	`TableAction[] \| string`	`[]`
`columnSize`	`column-size`	Optional property to control the column sizing mode. - ‘default’ uses containerWidth / visibleColumns. - ‘medium’ divides that result by 2. - ’large’ divides that result by 4.	`"default" \| "large" \| "medium"`	`'default'`
`config`	`config`	Config object to hide or format columns	`string \| { [key: string]: { hidden?: boolean; format?: "code" \| "bold" \| "html" \| "svg" \| "uppercase"; }; }`	`{}`
`data`	`table-data`	Static data for the table as an object or JSON string	`string \| { [key: string]: any; }[]`	`null`
`hostWidth`	`host-width`		`string`	`undefined`
`paginationEnabled`	`pagination-enabled`	Enable or disable pagination explicitly	`boolean`	`true`
`rowsPerPage`	`rows-per-page`	Number of rows per page	`number`	`10`
`searchEnabled`	`search-enabled`	Enable or disable search input for filtering	`boolean`	`false`
`showViewToggle`	`show-view-toggle`	Show view toggle control (segmented switch for Table/Card views)	`boolean`	`false`
`sortingEnabled`	`sorting-enabled`	Enable or disable column sorting	`boolean`	`false`
`theme`	`theme`	Theme for table styling: - ‘default’: Simple rows with no background - ‘color’: Alternating row colors - ‘brand’: Modern brand styling with hover effects and green accents	`"brand" \| "color" \| "default"`	`'color'`
`view`	`view`	View mode for displaying data: - ’table’: Traditional table layout (default) - ‘card’: Card grid layout	`"card" \| "table"`	`'table'`

`Events`

Event	Description	Type
`rowaction`	Define the event with the payload type	`CustomEvent<{ action: string; row: any; checked: boolean; }>`
`viewchange`	Emitted when view mode changes	`CustomEvent<{ view: "card" \| "table"; }>`

`Dependencies`

`Used by`

logo-space
svg-repository

`Depends on`

`Graph`

graph TD;
  eds-table --> eds-input-field
  eds-table --> eds-button
  eds-table --> eds-tooltip
  eds-table --> eds-icon-wrapper
  eds-table --> eds-switch
  eds-table --> eds-pagination
  eds-input-field --> eds-input-label
  eds-input-field --> eds-input
  eds-input-field --> eds-input-select
  eds-input-field --> eds-input-file
  eds-input-field --> eds-input-dropzone
  eds-input-field --> eds-input-search
  eds-input-field --> eds-input-range
  eds-input-field --> eds-input-footer
  eds-input --> eds-icon-wrapper
  eds-input-select --> eds-icon-wrapper
  eds-input-search --> eds-icon-wrapper
  eds-input-footer --> eds-icon-wrapper
  eds-input-footer --> eds-link
  eds-link --> eds-icon-wrapper
  eds-button --> eds-icon-wrapper
  eds-pagination --> eds-button
  eds-pagination --> eds-link
  logo-space --> eds-table
  svg-repository --> eds-table
  style eds-table fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS