Tables

Data Tables help communicate relationships between content.

Design System Guidelines

Basic Table

• As of this writing, Webflow doesn't have a native table component so this is built using rows and columns.
• Ensure that the combined minimum widths = 100% for all of the columns.

Basic Table with Stripes

• As of this writing, Webflow doesn't have a native table component so this is built using rows and columns.
• Ensure that the combined minimum widths = 100% for all of the columns.

Striped Table with Sortable Columns

• The sort widgets in the header row don't actually affect the data sorting due to Webflow limitations.
• As of this writing, Webflow doesn't have a native table component so this is built using rows and columns.
• Ensure that the combined minimum widths = 100% for all of the columns.

Striped Table with Checkboxes & Batch Actions

• The checkbox in the header row should check/uncheck all of the others, and it should change visual state when at least one of the others is checked, but it doesn't do either of these due to Webflow limitations.
• The batch actions dropdown should be disabled when all checkboxes are unchecked, but it doesn't consistently do this due to Webflow limitations.
• As of this writing, Webflow doesn't have a native table component so this is built using rows and columns.
• Ensure that the combined minimum widths = 100% for all of the columns.

Striped Table with Search

• Table rows should be filtered to match the search input as the user types, however Webflow doesn't permit this, so this example simply removes rows when the user clicks into the search input, and then restores them when they click search again.
• As of this writing, Webflow doesn't have a native table component so this is built using rows and columns.
• Ensure that the combined minimum widths = 100% for all of the columns.

Striped Table with Global Actions

• The first action is for uploading files, but doesn't actually function because we aren't subscribed to a Business Site Plan.
• The final/settings action enables users to show/hide columns within the table, but there's supposed to be at least one column checked at all times (can't uncheck the final one). Webflow doesn't support this conditional logic.
• The handles within the settings dropdown are for dragging columns to rearrange their order, however this doesn't function in Webflow.
• When using settings to make changes, the results are not supposed to be shown until Apply is selected, however Webflow doesn't permit such logic so this example shows the results immediately and Apply simply closes the dropdown.
• Per the previous notation, Cancel is supposed to close the settings dropdown without applying any changes, however Webflow doesn't support such logic so Cancel instead restores the original visibility state for all columns.
• As of this writing, Webflow doesn't have a native table component so this is built using rows and columns.
• Ensure that the combined minimum widths = 100% or more for all of the columns.

Striped Table with Expandable Details

• As of this writing, Webflow doesn't have a native table component so this is built using rows and columns.
• Ensure that the combined minimum widths = 100% for all of the columns.

Striped Table with Pagination

• This example includes two pages worth of table rows, accessed via < Previous and Next >.
• The page # input simply navigates to the other page when clicked, rather than validating user input, due to Webflow limitations.
• The "Items per page" select doesn't produce the expected results because that would require exceptional effort.
• If there were 12 or less total rows in this table, then only the "Items per page" select would appear and the other pagination controls would be hidden.
• As of this writing, Webflow doesn't have a native table component so this is built using rows and columns.
• Ensure that the combined minimum widths = 100% for all of the columns.

Complex Table with Stripes

• This example combines all of the preceding variations. Feel free to hide or otherwise disable any components you don't want to use.
• This example only filters content on the second page when the search input is selected, because filtering on the first page would require exceptional effort.
• See the preceding variations for additional exceptions and functional notes.

Condensed Complex Table with Stripes

• The only significant difference between this example and the one preceding it is that the fonts, padding and margins are more condensed.

Complex Table with Fixed Header Row

• A fixed header row is recommended when the number of items per page exceeds the fixed container height for the table data.
• This example combines all of the preceding variations. Feel free to hide or otherwise disable any components you don't want to use.
• This example only filters content on the second page when the search input is selected, because filtering on the first page would require exceptional effort.
• See the preceding variations for additional exceptions and functional notes.