Table

Default density Compact density Restart from the initial state Show the copyable source

A list of your recent invoices. Invoice Status Method Amount INV-1042 Paid Visa •••• 4242 $250.00 INV-1043 Pending PayPal $150.00 INV-1044 Unpaid Bank transfer $350.00 Total $750.00

Usage

Each part renders its native table element, so column layout, colspan, rowspan and header relationships work as in plain HTML. Use tp-table-head with scope="row" for the cell that names a row. Table is for reading data; it has no grid keyboard model, so compose Buttons, Menus or Inputs in cells for actions. Native and custom composition share the same overflow, geometry and theme owner. Do not mix the two anatomies within one Table or add interactive-grid roles.

Status and actions

Default density Compact density Restart from the initial state Show the copyable source

Task Owner Status Actions Redesign pricing page Maya Chen In review Manage Open task Reassign Delete task Migrate billing webhooks Jonas Weber Done Manage Open task Reassign Delete task Write onboarding emails Priya Patel Backlog Manage Open task Reassign Delete task

Give each control in a row a name that includes the row, such as “Actions for Redesign pricing page”, so it stays unambiguous out of visual context.

Editable cells

Default density Compact density Restart from the initial state Show the copyable source

Product Quantity Unit price Wireless mouse $29.99 Mechanical keyboard $129.99 USB-C hub $49.99

A Select in a cell works the same way for picking from a fixed list, such as reassigning work without leaving the table.

Default density Compact density Restart from the initial state Show the copyable source

Task Assignee Due Review vendor contract Maya Chen Jonas Weber Priya Patel Due Friday Prepare Q3 board deck Maya Chen Jonas Weber Priya Patel Due next week Renew SSL certificates Maya Chen Jonas Weber Priya Patel Overdue

Row selection

Default density Compact density Restart from the initial state Show the copyable source

Name Email Role Maya Chen maya@northwind.dev Owner Jonas Weber jonas@northwind.dev Admin Priya Patel priya@northwind.dev Member

selection-presentation="row" paints rows marked selected. Selection itself belongs to your application, usually driven by a Checkbox in each row; hovering never selects.

Sticky header and columns

Default density Compact density Restart from the initial state Show the copyable source

Region January February March April May June Half year North America$48,200$51,900$55,300$53,800$58,100$61,400$328,700 South America$12,400$13,100$12,800$14,600$15,200$16,000$84,100 Western Europe$39,700$41,200$43,900$42,500$45,800$47,300$260,400 Eastern Europe$9,800$10,400$11,100$10,900$11,700$12,300$66,200 Middle East$7,200$7,900$8,300$8,100$8,800$9,400$49,700 Africa$5,100$5,600$6,000$6,400$6,900$7,300$37,300 South Asia$14,300$15,800$16,900$17,400$18,600$19,900$102,900 East Asia$31,600$33,200$34,700$36,100$37,900$39,500$213,000 Oceania$6,700$7,100$7,400$7,900$8,200$8,800$46,100 Total$175,000$186,200$196,400$197,700$211,200$221,900$1,188,400

Constrain the Table with ordinary CSS such as max-block-size, and it becomes a focusable scroll region named by label. sticky-header, sticky-footer, sticky-start-columns and sticky-end-columns pin each edge independently and follow RTL: here the region names and the half-year totals stay in view while the months scroll between them. Use normal table/column CSS for content width. The component measures actual column geometry; it has no fixed column-width or spacing attributes. A cell spanning across a pinned/unpinned boundary stays unpinned. Column offsets update after native layout changes, resizing, inserted/removed rows or changed spans.

Wrapping text

Cells keep their text on one line, so data columns stay aligned and a wide Table scrolls. For descriptions and other prose, set white-space: normal on the Table, a row or a cell. Sizes and alignment set on a head or cell reach its native cell: min-inline-size keeps a prose column readable on a narrow screen, and inline-size fixes a column’s width.

Default density Compact density Restart from the initial state Show the copyable source

Tea Water Notes Sencha 70 °C Steep for one minute in water well below boiling. Hotter water draws out bitterness and hides the grassy sweetness, so let the kettle rest before pouring. Oolong 90 °C Rinse the leaves once to wake them, then brew short infusions of twenty to thirty seconds. The same leaves give five or six cups, each a little deeper than the last. Assam 100 °C Steep for four minutes at a full boil. The brew is strong and malty enough to take milk and sugar without losing its character.

API Reference

Every element also accepts motion-policy.

<tp-table-row>

<tp-table-head>

<tp-table-cell>

Related

Components, widgets and patterns that use this one.