Origami Frontend Components & Services

Demos: o-table

Caption and footnote

Caption elements may include flow content such as a heading, this demo uses o-typography to add a h2. The footer may also include any flow content, but in this case uses the footnote class to style a source.

Responsive Overflow

Open demo and shrink browser to preview. On small viewports this table overflows and may be scrolled left/right. This demo includes the optional row stripes from the previous demo.

Responsive Scroll

Open demo and shrink browser to preview. This table moves headers into the first column on small viewports. The headers stick to the left edge as the table data is scrolled. This demo includes the optional row stripes from the previous demo.

Responsive Flat

Open demo and shrink browser to preview. Each entry in the flat table is shown individually with headers on small viewports. This demo includes the optional row stripes from the previous demo.

Expanding Table

Open demo and shrink browser to preview. Responsive Overflow tables may be configured to expand/contract.

Sorting

This demo shows sorting columns of various data types, including FT style dates, times, and abbreviated numbers. The demo also shows a column with sort disabled.

Sorting Disabled

This demo shows how to disable sorting on an entire table.

Row Stripes

Adds a modifier class to make alternate table rows striped. An alternative to lined tables.

Vertically centre

Filter with a select box

This demo shows a table with columns which may be filtered by selecting from a dropdown of given value.

Filter with a text input

This demo shows a table with columns which may be filtered by searching for a specified value.

Status
active
Switch component view

GitHub Repository

Install o-table

If using the Build Service, add o-table@^9.0.3 to your script and link tags. Ensure the correct brand is set with a query parameter &brand=internal.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-table@^9.0.3".

Help & Support

o-table is maintained directly by the Origami team. If you have any questions about o-table or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com