woocommerce/plugins/woocommerce-admin/docs/components/table.md

`TableCard` (component)
=======================

This is an accessible, sortable, and scrollable table for displaying tabular data (like revenue and other analytics data).
It accepts `headers` for column headers, and `rows` for the table content.
`rowHeader` can be used to define the index of the row header (or false if no header).

`TableCard` serves as Card wrapper & contains a card header, `<Table />`, `<TableSummary />`, and `<Pagination />`.
This includes filtering and comparison functionality for report pages.

Props
-----

### `headers`

- Type: Array
  - defaultSort: Boolean
  - isSortable: Boolean
  - key: String
  - label: String
  - required: Boolean
- Default: null

An array of column headers (see `Table` props).

### `onQueryChange`

- Type: Function
- Default: `noop`

A function which returns a callback function to update the query string for a given `param`.

### `onClickDownload`

- Type: Function
- Default: null

A callback function which handles then "download" button press. Optional, if not used, the button won't appear.

### `query`

- Type: Object
- Default: `{}`

An object of the query parameters passed to the page, ex `{ page: 2, per_page: 5 }`.

### `rowHeader`

- Type: One of type: number, bool
- Default: `0`

An array of arrays of display/value object pairs (see `Table` props).

### `rows`

- Type: Array
Array
  - display: ReactNode
  - value: One of type: string, number, bool
- Default: `[]`

Which column should be the row header, defaults to the first item (`0`) (see `Table` props).

### `summary`

- Type: Array
  - label: ReactNode
  - value: One of type: string, number
- Default: null

An array of objects with `label` & `value` properties, which display in a line under the table.
Optional, can be left off to show no summary.

### `title`

- **Required**
- Type: String
- Default: null

The title used in the card header, also used as the caption for the content in this table.

`TablePlaceholder` (component)
==============================



Props
-----

### `caption`

- **Required**
- Type: String
- Default: null


### `headers`

- Type: Array
  - defaultSort: Boolean
  - isSortable: Boolean
  - key: String
  - label: String
  - required: Boolean
- Default: null


### `numberOfRows`

- Type: Number
- Default: `5`


`TableSummary` (component)
==========================

A component to display summarized table data - the list of data passed in on a single line.



Props
-----

### `data`

- Type: Array
- Default: null

An array of objects with `label` & `value` properties, which display on a single line.

`Table` (component)
===================

A table component, without the Card wrapper. This is a basic table display, sortable, but no default filtering.

Props
-----

### `ariaHidden`

- Type: Boolean
- Default: `false`

Controls whether this component is hidden from screen readers. Used by the loading state, before there is data to read.
Don't use this on real tables unless the table data is loaded elsewhere on the page.

### `caption`

- **Required**
- Type: String
- Default: null

A label for the content in this table

### `className`

- Type: String
- Default: null

Additional CSS classes.

### `headers`

- Type: Array
  - defaultSort: Boolean - Boolean, true if this column is the default for sorting. Only one column should have this set.
  - isNumeric: Boolean - Boolean, true if this column is a number value.
  - isSortable: Boolean - Boolean, true if this column is sortable.
  - key: String - The API parameter name for this column, passed to `orderby` when sorting via API.
  - label: String - The display label for this column.
  - required: Boolean - Boolean, true if this column should always display in the table (not shown in toggle-able list).
- Default: `[]`

An array of column headers, as objects.

### `onSort`

- Type: Function
- Default: `noop`

A function called when sortable table headers are clicked, gets the `header.key` as argument.

### `query`

- Type: Object
- Default: `{}`

The query string represented in object form

### `rows`

- **Required**
- Type: Array
Array
  - display: ReactNode - Display value, used for rendering- strings or elements are best here.
  - value: One of type: string, number, bool
- Default: null

An array of arrays of display/value object pairs.

### `rowHeader`

- Type: One of type: number, bool
- Default: `0`

Which column should be the row header, defaults to the first item (`0`) (but could be set to `1`, if the first col
is checkboxes, for example). Set to false to disable row headers.