Tables

Design Links

Open in Sketch Cloud

Open in Figma

Construction Example

By default table rows are intended but have an option to span the full width, when no hover actions are possible. Table rows can also contain editable text, which can be any of the forms available (Dropdowns, autocomplete, etc). Hovering over a single table row reveals the input field.

Contained Example

Additionally tables can be contained for better use in grid layouts, where they don't span full width and also contain different button types.

@import 'node_modules/@hospitality-digital/design-system/css/components/table.css';