Data Table Pro for HubSpot

What it does

Data Table Pro turns rows and columns entered in the page editor into a table that sorts, searches, pages and reflows. Columns are defined once and carry their own header, alignment, width and data type. Rows reference those columns by position.

Columns

Each column sets a header, a data type, an alignment, a width and an optional prefix and suffix.

• Text — sorts alphabetically, with natural handling of embedded digits.
• Number — sorts by value. Thousand separators and stray characters are stripped before comparison.
• Currency — sorts by value. Pair it with the prefix field for the symbol.
• Date — sorts by the parsed date. Formats such as Mar 14, 2027 and 2027-03-14 both work.
• Yes / No — renders a check or a dash and sorts true values first.

Width accepts narrow, auto or wide. The first column takes its width from Table Shell › First Column Width so the pinned column stays a fixed size.

Rows and cells

Every cell holds a value, an optional link and an emphasis setting. Emphasis switches between plain, strong, muted, badge and status pill. A cell with a link renders as an underlined anchor in the link colour.

Status pills

Setting a cell's emphasis to status pill renders it as a coloured dot followed by the label. Status Pills › Status Colours is a repeater pairing a cell value with a dot colour, matched without regard to case, so Active, Pending and whatever else the table carries each get their own dot. A value with no match falls back to the muted cell colour. The pill background, text colour, border, radius, text size, padding, dot size and the space between the dot and the label are fields under Style › Cells. The dot is hidden from assistive technology, so the pill reads as its label alone.

Table layout

Table Behaviour › Table Layout chooses the arrangement.

• Plain — the whole table sits in one bordered card, and a totals row runs as a grid row inside it.
• Framed — an outer surface in a light tint holds everything. The column headers sit straight on that surface with no background of their own, in a muted label colour and with the case left as typed. The rows sit in an inset card with its own radius, a hairline border and hairline dividers between rows. The totals sit on the surface below the card, label on the left and figure on the right.

Framed is an arrangement, not a set of fixed values: the surface colour, radius and padding, the card colour, radius, border colour and width, the header label colour and every part of the totals bar are fields under Style › Framed Layout. Framed carries its totals from Footer Row › Totals Label and Totals Value rather than from the grid cells, and it leaves the header in place while the page scrolls, since there is no bar behind it to pin.

Sorting

Sortable headers render as buttons, so they are reachable with the keyboard and operable with Enter or Space. A first click sorts ascending, a second click reverses it. The column header carries aria-sort and the chevron pair shows the active direction. Set Sort On Load — Column to a column position to sort the table as it renders; zero keeps the rows in the order they were entered. Individual columns can opt out with Sortable.

Search

The search field filters rows against every cell value in the row, across the whole table rather than the current page. The result count sits in a polite live region so screen readers hear the new total. When nothing matches, the table and the pagination controls are replaced by the empty state, whose title and text are both editable.

Pagination and the footer bar

Pagination › Mode chooses between showing every row, numbered pages, and a load more button.

Under numbered pages the footer bar runs on space-between in three parts: the previous control at the start, the page numbers in the middle, the next control at the end. Previous and next carry an arrow and no text, so each takes its accessible name from Previous Button Description and Next Button Description, and each disables at its end of the range. Page buttons carry aria-current. Sorting or searching returns to the first page. Below the mobile breakpoint the bar wraps: the arrows and the rows per page control hold the first line, the page numbers take a line of their own beneath them.

Arrow size, arrow button padding and the space between the three groups are all fields under Style › Pagination & Buttons.

Rows per page

Rows Per Page Options is a repeater, so the options are yours to define. Each carries the text the reader sees and the row count it applies, and a count of zero makes an option that shows every row. Rows Per Page — Selected On Load picks which one starts selected, and that option sets the starting page size. Rows Per Page Label sets the wording beside it, and Rows Per Page Placement puts it at either end of the bar. Switching Show Rows Per Page Control off removes it and hands the page size back to Rows Per Page.

Choosing a new size redraws the table straight away, returns to the first page, and leaves the search text and the sorted column exactly as they were. The control is a native select with a real label bound to it, so it reaches the keyboard and the screen reader the way a dropdown should. Its background, border colour and width, radius, text colour, size, padding and focus ring are all fields under Style › Rows Per Page Control.

Sticky header and first column

With Sticky Header on, the header bar pins to the top of the window while the page scrolls past the table and releases as the table ends. It stays aligned with the body when the table scrolls sideways. Sticky First Column pins the first column against horizontal scrolling.

Small screens

Small Screen Layout chooses between two behaviours below the mobile breakpoint.

• Scroll sideways — the table scrolls horizontally, with a fade on the trailing edge and a line of editable text below it while there is more to see.
• Stack — each row becomes a bordered card, every cell picks up its column header as a label, and the sortable headers collapse into a row of chips above the cards.

Style

Every colour, size, radius, border width and spacing value on the Style tab writes a CSS custom property, so nothing in the markup carries an inline style. The body font and the heading font inherit from the host theme, as do the accent colour and the link colour. Density switches the vertical cell padding between the value you set and that value scaled by Compact Density Scale.

Accessibility

• ARIA table, row group, row, column header and cell roles across the grid.
• aria-sort updated on the active column as the direction changes.
• Sort controls, pagination buttons, the rows per page dropdown and the search field are all keyboard operable, with a visible focus ring.
• The previous and next arrows carry no text, so each takes its accessible name from a field.
• The rows per page control is a native select bound to a real label.
• The scrollable region takes focus so it can be scrolled with the arrow keys.
• The result count is announced through a polite live region.
• Yes and no icons carry their text value as an accessible label.
• Motion is disabled under prefers-reduced-motion.

Notes on this page

The first instance runs on field defaults. The rest change only Style tab values, behaviour switches and content. The last one sets Table Layout to Framed, which is why it reads as a different product while running the same module.