--- title: Table (Vanilla) - USWDS + Tailwind description: Present data in rows and columns with tables. Compare striped, compact, scrollable, and sticky layouts. --- # Table Present data in rows and columns with tables. Compare striped, compact, scrollable, and sticky layouts. ## Examples ### Default ```html
Bordered table
Document title Description Year
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791
Declaration of Sentiments A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens. 1848
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863
``` ### Striped ```html
Bordered table with horizontal stripes
Document title Description Year
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791
Declaration of Sentiments A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens. 1848
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863
``` ### Borderless ```html
Borderless table: A borderless table can be useful when you want the information to feel more a part of the text it accompanies and extends.
Document title Description Year
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791
Declaration of Sentiments A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens. 1848
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863
``` ### Compact ```html
Bordered table
Document title Description Year
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791
Declaration of Sentiments A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens. 1848
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863
``` ### Scrollable ```html
Bordered table
Document title Description Year
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791
Declaration of Sentiments A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens. 1848
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863
``` ### Sticky Header ```html
Sticky header table
Document title Description Year
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791
Declaration of Sentiments A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens. 1848
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791
Declaration of Sentiments A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens. 1848
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791
Declaration of Sentiments A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens. 1848
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863
``` ### Sticky Column ```html
Bordered table
Document title Description Year
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791
Declaration of Sentiments A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens. 1848
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863
``` ### Stacked ```html
Historic documents
Document title Description Year
Declaration of Independence Statement declaring independence from the British Empire. 1776
``` ### Sortable The component reads header names and reorders rows in the first `` when sorting changes. ```html
Federal Agencies and Employee Count
Agency
Employees
Founded
Type
Department of Defense 732,000 1947-09-18 Executive
Department of Veterans Affairs 380,000 1989-03-15 Executive
Department of Homeland Security 240,000 2002-11-25 Executive
Department of Treasury 87,000 1789-09-02 Executive
Department of Justice 115,000 1870-07-01 Executive
Department of Agriculture 95,000 1862-05-15 Executive
``` ## Component API ### Styling Default, striped, borderless, compact, scrollable, and sticky tables use native table markup and Tailwind classes. They do not need `tableInit()`. Preserve captions, column headers, row-header scopes, and keyboard access to scroll containers. ### Sorting markup Run `tableInit()` from `@uswds-tailwind/compat/table` after the markup exists. It returns initialized `Table` instances. Use `data-scope="table" data-part="root"` on a wrapper containing a `table` part and a separate `sr-status` part. Both are required. The table must have a ``; the wrapper sorts its first body. Author the status region with `class="sr-only"`; the runtime supplies `aria-live="polite"` and announcement text. Mark sortable `` headers with `data-sortable` and place a native button inside each header. Presence of `data-sortable`, including `false`, enables sorting. The wrapper generates `header` and `sort-trigger` parts on these elements. Rows and cells are native markup, not anatomy parts. The wrapper generates `data-sort-active="true"` on cells in the sorted column. | Element | Attribute | Description | | - | - | - | | Root | `data-sort-column` | Authored nonnegative integer column index for initial sorting. | | Root | `data-sort-direction` | Authored `ascending` or `descending`; defaults to an initially sorted header’s direction, then `ascending`. | | Sortable header | `aria-sort` | May author `ascending` or `descending` for initial sorting when no valid root column is supplied. Generated after initialization and removed from unsorted headers. | | Cell | `data-sort-value` | Authored comparison value. Nonempty values take precedence over `data-sort`, rendered text, then text content. | Numeric values compare as numbers when both cells contain nonempty numeric strings. Other values use locale comparison with numeric ordering and ignored punctuation. ### Configuration | Option | Description | | - | - | | `defaultSortDescriptor` | Initial `{ column: number, direction: 'ascending' \| 'descending' }`, or `null`. Takes precedence over authored sorting attributes, including an explicit `null`. | | `sortDescriptor` | Controlled descriptor, or `null` for unsorted. Your application must update it after requests. | | `captionText` | Announcement caption; defaults to rendered caption text. | | `columnNames` | Record of column indices to announcement names; defaults to rendered sortable header text. | | `id`, `ids` | Instance identifier and generated root, header, sortTrigger, and srStatus IDs. | | `onSortChange` | Receives `{ sortDescriptor }` for sort changes or controlled requests. This is a JavaScript callback. | ### Methods and cleanup Use `Table.getOrCreateInstance(root, options)` to configure an instance. `api.setSortDescriptor(descriptor)` requests a sort update and returns `void`. `api.sortDescriptor` and `api.announcement` expose current state. Clearing the descriptor removes sort state but does not restore the original row order. Initialization requires an authored announcement element; it does not create a sibling region. Call `destroy()` before removing markup. See [instance lifecycle](https://uswds-tailwind.com/docs/vanilla/javascript#instance-lifecycle).