@iress-oss/ids-mcp-server 6.0.0-alpha.1-canary-20251204032753-fe18cab → 6.0.0-alpha.1-canary-20251204040305-3639454

package/generated/docs/components_components-table-docs.md

@@ -0,0 +1,4038 @@
+Table
+=====
+
+Overview
+--------
+
+Data driven component for displaying tabular data.
+
+* * *
+
+Updated
+
+**Recently updated**
+
+This component has been recently updated with new props. The props have been marked as beta. Please tell us if there are any issues.
+
+[](./iframe.html?id=components-table--automatic-columns)
+
+My investments
+| Investment Name | Cost | Investment Date | Total Percentage |
+| --- | --- | --- | --- |
+| Artemis Fund Managers Limited | 23898 | 2019-09-23 | 24.8 |
+| CASH.CASH | 49751.4 | 2020-06-28 | 49 |
+| VODAFONE GRP | 26382.456 | 2019-02-05 | 26.2 |
+
+```
+
+<IressTable
+  caption\="My investments"
+  rows\={\[
+    {
+      cost: 23898,
+      investmentDate: '2019-09-23',
+      investment\_name: 'Artemis Fund Managers Limited',
+      totalPercentage: 24.8
+    },
+    {
+      cost: 49751.4,
+      investmentDate: '2020-06-28',
+      investment\_name: 'CASH.CASH',
+      totalPercentage: 49
+    },
+    {
+      cost: 26382.456,
+      investmentDate: '2019-02-05',
+      investment\_name: 'VODAFONE GRP',
+      totalPercentage: 26.2
+    }
+  \]}
+/>
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alternate | 
+If set to true, the table will have alternating row colors. This is useful for improving readability in tables with many rows.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| caption\* | 
+
+Caption that describes the data in the table, required for accessibility.
+
+ReactNode
+
+
+
+ | \- | 
+
+"My investments"
+
+ |
+| children | 
+
+Multiple table elements can be passed as children. Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+
+ReactNode
+
+
+
+ | \- | \- |
+| columns | 
+
+A mapping of columns to be displayed in the table. If not provided, it will be automatically regenerated from the row data.
+
+TableColumn<TRow, TVal>\[\]
+
+ | \- | Set object |
+| compact | 
+
+Compact view of the table, used for tables with a lot of data.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hover | 
+
+When set to true, hovering over a row will trigger a UI change.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeRowBorders | 
+
+If set to true, the table will not have borders between rows. This is useful for simpler tables where the row borders are not needed.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| rowProps | 
+
+Add additional props to the row element. Can be a props map or a function that returns an props map. The function is called with the row data.
+
+TableRowsProps\['rowProps'\]
+
+ | \- | Set object |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\]
+
+ | \[\] | 
+
+RAW
+
+*   rows :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 4 keys
+        
+    *   1 :
+        
+        {...} 4 keys
+        
+    *   2 :
+        
+        {...} 4 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| scope | 
+
+Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+
+union
+
+
+
+ | \- | 
+
+rowcol
+
+ |
+
+Usage
+-----
+
+### Automatic columns
+
+To get started, the `IressTable` component only requires the `caption` and `rows` props to be set.
+
+*   `caption` a string describing what the table is displaying (required for accessibility, it can be visually hidden by setting the `hiddenCaption` prop).
+*   `rows` are an array of objects, each object represents a row in the table. The table will use the key of the first object to determine the columns, automatically made human readable if the key is camel case, snake case or kebab case.
+
+[](./iframe.html?id=components-table--automatic-columns)
+
+My investments
+| Investment Name | Cost | Investment Date | Total Percentage |
+| --- | --- | --- | --- |
+| Artemis Fund Managers Limited | 23898 | 2019-09-23 | 24.8 |
+| CASH.CASH | 49751.4 | 2020-06-28 | 49 |
+| VODAFONE GRP | 26382.456 | 2019-02-05 | 26.2 |
+
+```
+
+<IressTable
+  caption\="My investments"
+  rows\={\[
+    {
+      cost: 23898,
+      investmentDate: '2019-09-23',
+      investment\_name: 'Artemis Fund Managers Limited',
+      totalPercentage: 24.8
+    },
+    {
+      cost: 49751.4,
+      investmentDate: '2020-06-28',
+      investment\_name: 'CASH.CASH',
+      totalPercentage: 49
+    },
+    {
+      cost: 26382.456,
+      investmentDate: '2019-02-05',
+      investment\_name: 'VODAFONE GRP',
+      totalPercentage: 26.2
+    }
+  \]}
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alternate | 
+If set to true, the table will have alternating row colors. This is useful for improving readability in tables with many rows.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| caption\* | 
+
+Caption that describes the data in the table, required for accessibility.
+
+ReactNode
+
+
+
+ | \- | 
+
+"My investments"
+
+ |
+| children | 
+
+Multiple table elements can be passed as children. Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+
+ReactNode
+
+
+
+ | \- | \- |
+| columns | 
+
+A mapping of columns to be displayed in the table. If not provided, it will be automatically regenerated from the row data.
+
+TableColumn<TRow, TVal>\[\]
+
+ | \- | Set object |
+| compact | 
+
+Compact view of the table, used for tables with a lot of data.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hover | 
+
+When set to true, hovering over a row will trigger a UI change.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeRowBorders | 
+
+If set to true, the table will not have borders between rows. This is useful for simpler tables where the row borders are not needed.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| rowProps | 
+
+Add additional props to the row element. Can be a props map or a function that returns an props map. The function is called with the row data.
+
+TableRowsProps\['rowProps'\]
+
+ | \- | Set object |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\]
+
+ | \[\] | 
+
+RAW
+
+*   rows :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 4 keys
+        
+    *   1 :
+        
+        {...} 4 keys
+        
+    *   2 :
+        
+        {...} 4 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| scope | 
+
+Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+
+union
+
+
+
+ | \- | 
+
+rowcol
+
+ |
+
+### Custom columns
+
+For more control over the columns, the `columns` prop can be used to define the columns. This accepts an array of `TableColumn` objects.
+
+Each array item represents a key in the objects in your `rows` prop. If one of the keys in your `rows` prop is not defined in the `columns` prop, it will not be displayed in the table.
+
+[](./iframe.html?id=components-table--custom-columns)
+
+My investments
+| Investment | Date | Share | Cost |
+| --- | --- | --- | --- |
+| Artemis Fund Managers Limited | 23/09/2019 | 24.8% | $23,898.00 |
+| CASH.CASH | 28/06/2020 | 49% | $49,751.40 |
+| VODAFONE GRP | 05/02/2019 | 26.2% | $26,382.46 |
+
+```
+
+import {
+  IressBadge,
+  IressTable,
+  IressTableFormattedValue,
+  type IressTableProps,
+} from '@iress-oss/ids-components';
+type Props \= Partial<IressTableProps<object, never\>>;
+const renderColumn \= (value: number) \=> (
+  <IressBadge mode\={value \> 30000 ? 'success' : 'danger'}\>
+    <IressTableFormattedValue value\={value} format\="currency" />
+  </IressBadge\>
+);
+export const TableCustomColumns \= () \=> (
+  <IressTable
+    caption\="My investments"
+    rows\={\[
+      {
+        investment\_name: 'Artemis Fund Managers Limited',
+        cost: 23898,
+        investmentDate: '2019-09-23',
+        totalPercentage: 24.8,
+      },
+      {
+        investment\_name: 'CASH.CASH',
+        cost: 49751.4,
+        investmentDate: '2020-06-28',
+        totalPercentage: 49,
+      },
+      {
+        investment\_name: 'VODAFONE GRP',
+        cost: 26382.456,
+        investmentDate: '2019-02-05',
+        totalPercentage: 26.2,
+      },
+    \]}
+    
+    columns\={\[
+      {
+        key: 'investment\_name',
+        label: 'Investment',
+        divider: true,
+      },
+      {
+        key: 'investmentDate',
+        label: 'Date',
+        format: 'date',
+      },
+      {
+        key: 'totalPercentage',
+        label: 'Share',
+        format: 'percent',
+      },
+      {
+        key: 'cost',
+        label: 'Cost',
+        textAlign: 'right',
+        format: renderColumn,
+      },
+    \]}
+  />
+);
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alternate | 
+If set to true, the table will have alternating row colors. This is useful for improving readability in tables with many rows.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| caption\* | 
+
+Caption that describes the data in the table, required for accessibility.
+
+ReactNode
+
+
+
+ | \- | \- |
+| children | 
+
+Multiple table elements can be passed as children. Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+
+ReactNode
+
+
+
+ | \- | \- |
+| columns | 
+
+A mapping of columns to be displayed in the table. If not provided, it will be automatically regenerated from the row data.
+
+TableColumn<TRow, TVal>\[\]
+
+ | \- | \- |
+| compact | 
+
+Compact view of the table, used for tables with a lot of data.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hover | 
+
+When set to true, hovering over a row will trigger a UI change.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeRowBorders | 
+
+If set to true, the table will not have borders between rows. This is useful for simpler tables where the row borders are not needed.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| rowProps | 
+
+Add additional props to the row element. Can be a props map or a function that returns an props map. The function is called with the row data.
+
+TableRowsProps\['rowProps'\]
+
+ | \- | Set object |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\]
+
+ | \[\] | \- |
+| scope | 
+
+Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+
+union
+
+
+
+ | \- | 
+
+rowcol
+
+ |
+
+### Column API
+
+These are the configuration options available for each column.
+
+**Note:** The `id` prop has been removed. The `key` is always used for the id of the table cell, alongside its row index.
+
+export interface TableColumn<TRow extends object, TVal \= unknown\> {
+  /\*\*
+   \* Aligns the content of the cell.   \* @default left   \*/
+  align?: TableColumnAligns;
+  /\*\*
+   \* The currency code to prefix to the value if \`format\` is set to currency.   \* @default $   \*/
+  currencyCode?: string;
+  /\*\*
+   \* When set to true, a divider will be rendered after the column.   \*/
+  divider?: boolean;
+  /\*\*
+   \* Formats the cell content.   \* To use the in-built formatters, set this to: string, number, date, currency, percent.   \* Use a custom formatter by passing a function that returns a ReactNode.   \*/
+  format?: TableCellFormats | ((value: TVal, row?: TRow) \=> ReactNode);
+  /\*\*
+   \* The unique key for the column.   \*/
+  key: string;
+  /\*\*
+   \* The label for the column header.   \*/
+  label?: ReactNode;
+  /\*\*
+   \* When set to true, the column will be sortable.   \* Setting it to either \`asc\` or \`desc\` will set the initial sort order.   \*/
+  sort?: boolean | SortDirection;
+  /\*\*
+   \* Text to be read by a screen reader when a column is sortable (but not currently sorted).   \* @default sortable   \*/
+  sortableText?: string;
+  /\*\*
+   \* The width of the column.   \*/
+  width?: string;
+}
+
+```
+
+Examples
+--------
+
+### Formats
+
+The table component provides some basic formatting. This is controlled by the `format` property of the `TableColumn` object.
+
+*   `date`: the value (which can be a Date object, timestamp or a ISO8601 formatted string) will be formatted to render as DD/MM/YYYY.
+*   `currency`: the value (which should be a number or a string containing a number) is formatted with the `currencyCode` (also a prop on `TableColumn` which defaults to `$`) prepended to the number (formatted to 2 decimal places). Currency formatted columns are automatically right aligned for readability.
+*   `percent`: the value (which should be a number or a string containing a number) is formatted as a percentage (multiplied by 100 and rounded to 2 decimal places).
+*   `number`: the number format aligns the number to the right, and converts strings to a number.
+*   `shortDate`: the value (which can be a Date object, timestamp or a ISO8601 formatted string) will be formatted to render as DD MMM YYYY.
+*   `isoDateTime`: the value (which can be a Date object, timestamp or a ISO8601 formatted string) will be formatted to render as YYYY-MM-DD HH:mm:ss (Timezone)
+*   `relativeTime`: the value (which can be a Date object, timestamp or a ISO8601 formatted string) will be formatted to render as a relative time (eg. 2 days ago, 3 hours ago, etc). It will fallback to the `shortDate` format if the date is more than one week in the past.
+
+To completely customise it, you can also send in a function that returns a ReactNode. It has two parameters, the original value and the row it is connected to.
+
+[](./iframe.html?id=components-table--formats)
+
+Available formats
+| String | Number | Date | Short date | ISO Date & Time | Relative time | Currency (AUD) | Percent | Custom |
+| --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| Hello, world! | 123456 | 28/06/2020 | 28 Jun 2020 | 2020-06-28 00:00:00 (UTC) | 22 seconds ago | $123,456.78 | 12% | Custom |
+
+```
+
+import { IressBadge, IressTable, type IressTableProps } from '@iress-oss/ids-components';
+type Props \= Partial<IressTableProps<object, never\>>;
+const renderColumn \= (value: string) \=> (
+  <IressBadge mode\="info"\>{value}</IressBadge\>
+);
+// https://blog.devgenius.io/javascript-date-subtract-seconds-83b3285b7959
+const subtractSeconds \= (date: Date, seconds: number) \=> {
+  // make copy with Date() constructor
+  const dateCopy \= new Date(date);
+  dateCopy.setSeconds(date.getSeconds() \- seconds);
+  return dateCopy;
+};
+const tenSecondsAgo \= subtractSeconds(new Date(), 10);
+export const TableFormats \= () \=> (
+  <IressTable
+    caption\="Available formats"
+    rows\={\[
+      {
+        string: 'Hello, world!',
+        number: 123456,
+        date: '2020-06-28',
+        shortDate: '2020-06-28',
+        isoDateTime: '2020-06-28',
+        relativeTime: tenSecondsAgo,
+        currency: 123456.78,
+        percent: 12,
+        custom: 'Custom',
+      },
+    \]}
+    
+    columns\={\[
+      { key: 'string', label: 'String', format: 'string' },
+      { key: 'number', label: 'Number', format: 'number' },
+      { key: 'date', label: 'Date', format: 'date' },
+      { key: 'shortDate', label: 'Short date', format: 'shortDate' },
+      { key: 'isoDateTime', label: 'ISO Date & Time', format: 'isoDateTime' },
+      { key: 'relativeTime', label: 'Relative time', format: 'relativeTime' },
+      {
+        key: 'currency',
+        label: 'Currency (AUD)',
+        format: 'currency',
+        currencyCode: '',
+      },
+      { key: 'percent', label: 'Percent', format: 'percent' },
+      {
+        key: 'custom',
+        label: 'Custom',
+        format: renderColumn,
+      },
+    \]}
+  />
+);
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alternate | 
+If set to true, the table will have alternating row colors. This is useful for improving readability in tables with many rows.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| caption\* | 
+
+Caption that describes the data in the table, required for accessibility.
+
+ReactNode
+
+
+
+ | \- | \- |
+| children | 
+
+Multiple table elements can be passed as children. Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+
+ReactNode
+
+
+
+ | \- | \- |
+| columns | 
+
+A mapping of columns to be displayed in the table. If not provided, it will be automatically regenerated from the row data.
+
+TableColumn<TRow, TVal>\[\]
+
+ | \- | \- |
+| compact | 
+
+Compact view of the table, used for tables with a lot of data.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hover | 
+
+When set to true, hovering over a row will trigger a UI change.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeRowBorders | 
+
+If set to true, the table will not have borders between rows. This is useful for simpler tables where the row borders are not needed.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| rowProps | 
+
+Add additional props to the row element. Can be a props map or a function that returns an props map. The function is called with the row data.
+
+TableRowsProps\['rowProps'\]
+
+ | \- | Set object |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\]
+
+ | \[\] | \- |
+| scope | 
+
+Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+
+union
+
+
+
+ | \- | 
+
+rowcol
+
+ |
+
+### Sorting
+
+Sorting can be enabled on a column by setting the `sort` property of the `TableColumn` to true. It can also be set to `asc` or `desc` if you would like it to initally sort in a certain direction.
+
+The sort button has some visually hidden text for screenreaders to signify that the column is sortable. If you need to change this (ie. for translation purposes), it can be done with the `sortableText` column option which defaults to: sortable.
+
+[](./iframe.html?id=components-table--sorting)
+
+My investments
+| Investment | Date | Share | Cost |
+| --- | --- | --- | --- |
+| Artemis Fund Managers Limited | 23/09/2019 | 24.8% | $23,898.00 |
+| CASH.CASH | 28/06/2020 | 49% | $49,751.40 |
+| VODAFONE GRP | 05/02/2019 | 26.2% | $26,382.46 |
+
+```
+
+import {
+  IressBadge,
+  IressTable,
+  IressTableFormattedValue,
+  type IressTableProps,
+} from '@iress-oss/ids-components';
+type Props \= Partial<IressTableProps<object, never\>>;
+const renderColumn \= (value: number) \=> (
+  <IressBadge mode\={value \> 30000 ? 'success' : 'danger'}\>
+    <IressTableFormattedValue value\={value} format\="currency" />
+  </IressBadge\>
+);
+export const TableSorting \= () \=> (
+  <IressTable
+    caption\="My investments"
+    rows\={\[
+      {
+        investment\_name: 'Artemis Fund Managers Limited',
+        cost: 23898,
+        investmentDate: '2019-09-23',
+        totalPercentage: 24.8,
+      },
+      {
+        investment\_name: 'CASH.CASH',
+        cost: 49751.4,
+        investmentDate: '2020-06-28',
+        totalPercentage: 49,
+      },
+      {
+        investment\_name: 'VODAFONE GRP',
+        cost: 26382.456,
+        investmentDate: '2019-02-05',
+        totalPercentage: 26.2,
+      },
+    \]}
+    
+    columns\={\[
+      {
+        key: 'investment\_name',
+        label: 'Investment',
+        divider: true,
+        sort: 'asc',
+      },
+      {
+        key: 'investmentDate',
+        label: 'Date',
+        format: 'date',
+        sort: true,
+      },
+      {
+        key: 'totalPercentage',
+        label: 'Share',
+        format: 'percent',
+        sort: true,
+      },
+      {
+        key: 'cost',
+        label: 'Cost',
+        textAlign: 'right',
+        sort: true,
+        format: renderColumn,
+      },
+    \]}
+  />
+);
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alternate | 
+If set to true, the table will have alternating row colors. This is useful for improving readability in tables with many rows.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| caption\* | 
+
+Caption that describes the data in the table, required for accessibility.
+
+ReactNode
+
+
+
+ | \- | \- |
+| children | 
+
+Multiple table elements can be passed as children. Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+
+ReactNode
+
+
+
+ | \- | \- |
+| columns | 
+
+A mapping of columns to be displayed in the table. If not provided, it will be automatically regenerated from the row data.
+
+TableColumn<TRow, TVal>\[\]
+
+ | \- | \- |
+| compact | 
+
+Compact view of the table, used for tables with a lot of data.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hover | 
+
+When set to true, hovering over a row will trigger a UI change.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeRowBorders | 
+
+If set to true, the table will not have borders between rows. This is useful for simpler tables where the row borders are not needed.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| rowProps | 
+
+Add additional props to the row element. Can be a props map or a function that returns an props map. The function is called with the row data.
+
+TableRowsProps\['rowProps'\]
+
+ | \- | Set object |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\]
+
+ | \[\] | \- |
+| scope | 
+
+Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+
+union
+
+
+
+ | \- | 
+
+rowcol
+
+ |
+
+### Custom sorting logic
+
+By default, sorting is automatically inferred from the raw column values.
+
+If you need to customise the sorting logic, you can use the `sortFn` property of the `TableColumn`. It accepts one of the following values:
+
+*   A `string` referencing a built-in sort function: `alphanumeric`, `alphanumericCaseSensitive`, `text`, `textCaseSensitive`, `datetime` and `basic`. To understand how they work, visit the [Tanstack Table documentation](https://tanstack.com/table/v8/docs/api/features/sorting/#sorting-functions).
+*   A custom sort function that takes two arguments: `a` and `b`, which are the two rows being compared. It should return `-1`, `0` or `1` depending on the comparison.
+
+[](./iframe.html?id=components-table--custom-sorting-logic)
+
+My investments
+| Investment | Date | Share | Cost (sorts by net cost if available) |
+| --- | --- | --- | --- |
+| Artemis Fund Managers Limited | 23/09/2019 | 24.8% | $23,898.00 (net: N/A) |
+| CASH.CASH | 28/06/2020 | 49% | $49,751.40 (net: $20,000.00) |
+| VODAFONE GRP | 05/02/2019 | 26.2% | $26,382.46 (net: N/A) |
+
+```
+
+import {
+  IressTable,
+  IressTableFormattedValue,
+  type IressTableProps,
+  type TableColumn,
+} from '@iress-oss/ids-components';
+type Props \= Partial<IressTableProps<Row, never\>>;
+interface Row {
+  investment\_name: string;
+  cost: number;
+  netCost?: number;
+  investmentDate: string;
+  totalPercentage: number;
+}
+const columns: TableColumn<Row\>\[\] \= \[
+  {
+    key: 'investment\_name',
+    label: 'Investment',
+    divider: true,
+    sort: 'asc',
+    sortFn: 'textCaseSensitive',
+  },
+  {
+    key: 'investmentDate',
+    label: 'Date',
+    format: 'date',
+    sort: true,
+    sortFn: 'datetime',
+  },
+  {
+    key: 'totalPercentage',
+    label: 'Share',
+    format: 'percent',
+    sort: true,
+    sortFn: 'alphanumeric',
+  },
+  {
+    key: 'cost',
+    label: 'Cost (sorts by net cost if available)',
+    textAlign: 'right',
+    format: (value: number, row) \=> {
+      return (
+        <\>
+          <IressTableFormattedValue value\={value} format\="currency" /> (net:{' '}
+          {row?.netCost ? (
+            <IressTableFormattedValue value\={row.netCost} format\="currency" />
+          ) : (
+            'N/A'
+          )}
+          )        </\>
+      );
+    },
+    sortFn: (a, b) \=> {
+      const aCost \= a.original.netCost ?? a.original.cost;
+      const bCost \= b.original.netCost ?? b.original.cost;
+      return aCost \- bCost;
+    },
+  },
+\];
+export const TableSortingFn \= () \=> (
+  <IressTable<Row\>
+    caption\="My investments"
+    rows\={\[
+      {
+        investment\_name: 'Artemis Fund Managers Limited',
+        cost: 23898,
+        investmentDate: '2019-09-23',
+        totalPercentage: 24.8,
+      },
+      {
+        investment\_name: 'CASH.CASH',
+        cost: 49751.4,
+        netCost: 20000,
+        investmentDate: '2020-06-28',
+        totalPercentage: 49,
+      },
+      {
+        investment\_name: 'VODAFONE GRP',
+        cost: 26382.456,
+        investmentDate: '2019-02-05',
+        totalPercentage: 26.2,
+      },
+    \]}
+    
+    columns\={columns}
+  /\>
+);
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alternate | 
+If set to true, the table will have alternating row colors. This is useful for improving readability in tables with many rows.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| caption\* | 
+
+Caption that describes the data in the table, required for accessibility.
+
+ReactNode
+
+
+
+ | \- | \- |
+| children | 
+
+Multiple table elements can be passed as children. Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+
+ReactNode
+
+
+
+ | \- | \- |
+| columns | 
+
+A mapping of columns to be displayed in the table. If not provided, it will be automatically regenerated from the row data.
+
+TableColumn<TRow, TVal>\[\]
+
+ | \- | \- |
+| compact | 
+
+Compact view of the table, used for tables with a lot of data.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hover | 
+
+When set to true, hovering over a row will trigger a UI change.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeRowBorders | 
+
+If set to true, the table will not have borders between rows. This is useful for simpler tables where the row borders are not needed.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| rowProps | 
+
+Add additional props to the row element. Can be a props map or a function that returns an props map. The function is called with the row data.
+
+TableRowsProps\['rowProps'\]
+
+ | \- | Set object |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\]
+
+ | \[\] | \- |
+| scope | 
+
+Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+
+union
+
+
+
+ | \- | 
+
+rowcol
+
+ |
+
+### Width
+
+The width of a column is controlled by the `width` property on the `TableColumn` object. It takes a string so it can be set to a pixel value or a percentage.
+
+When the table exceeds the width of the container, a horizontal scrollbar is triggered. This makes it possible to view larger tables on mobile devices.
+
+[](./iframe.html?id=components-table--width)
+
+My investments
+| Investment | Cost | Investment date | Share |
+| --- | --- | --- | --- |
+| Artemis Fund Managers Limited | 23898 | 2019-09-23 | 24.8% |
+| CASH.CASH | 49751.4 | 2020-06-28 | 49% |
+| VODAFONE GRP | 26382.456 | 2019-02-05 | 26.2% |
+
+```
+
+<IressTable
+  caption\="My investments"
+  rows\={\[
+    {
+      cost: 23898,
+      investmentDate: '2019-09-23',
+      investment\_name: 'Artemis Fund Managers Limited',
+      totalPercentage: 24.8
+    },
+    {
+      cost: 49751.4,
+      investmentDate: '2020-06-28',
+      investment\_name: 'CASH.CASH',
+      totalPercentage: 49
+    },
+    {
+      cost: 26382.456,
+      investmentDate: '2019-02-05',
+      investment\_name: 'VODAFONE GRP',
+      totalPercentage: 26.2
+    }
+  \]}
+  columns\={\[
+    {
+      key: 'investment\_name',
+      label: 'Investment',
+      width: '450px'
+    },
+    {
+      key: 'cost',
+      label: 'Cost',
+      width: '220px'
+    },
+    {
+      key: 'investmentDate',
+      label: 'Investment date',
+      width: '220px'
+    },
+    {
+      format: 'percent',
+      key: 'totalPercentage',
+      label: 'Share'
+    }
+  \]}
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alternate | 
+If set to true, the table will have alternating row colors. This is useful for improving readability in tables with many rows.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| caption\* | 
+
+Caption that describes the data in the table, required for accessibility.
+
+ReactNode
+
+
+
+ | \- | 
+
+"My investments"
+
+ |
+| children | 
+
+Multiple table elements can be passed as children. Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+
+ReactNode
+
+
+
+ | \- | \- |
+| columns | 
+
+A mapping of columns to be displayed in the table. If not provided, it will be automatically regenerated from the row data.
+
+TableColumn<TRow, TVal>\[\]
+
+ | \- | 
+
+RAW
+
+*   columns :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 3 keys
+        
+    *   1 :
+        
+        {...} 3 keys
+        
+    *   2 :
+        
+        {...} 3 keys
+        
+    *   3 :
+        
+        {...} 3 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| compact | 
+
+Compact view of the table, used for tables with a lot of data.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hover | 
+
+When set to true, hovering over a row will trigger a UI change.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeRowBorders | 
+
+If set to true, the table will not have borders between rows. This is useful for simpler tables where the row borders are not needed.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| rowProps | 
+
+Add additional props to the row element. Can be a props map or a function that returns an props map. The function is called with the row data.
+
+TableRowsProps\['rowProps'\]
+
+ | \- | Set object |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\]
+
+ | \[\] | 
+
+RAW
+
+*   rows :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 4 keys
+        
+    *   1 :
+        
+        {...} 4 keys
+        
+    *   2 :
+        
+        {...} 4 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| scope | 
+
+Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+
+union
+
+
+
+ | \- | 
+
+rowcol
+
+ |
+
+### Alignment
+
+Columns can be aligned using the `align` property on the `TableColumn` object. Columns can be aligned to the left, right or center.
+
+Currency and number formats are automatically right aligned to make the values easier to compare, but this can be overriden by setting the `align` property.
+
+[](./iframe.html?id=components-table--alignment)
+
+My investments
+| Investment (left) | Cost (center) | Date (center) | Share (right) |
+| --- | --- | --- | --- |
+| Artemis Fund Managers Limited | $23,898.00 | 23/09/2019 | 24.8% |
+| CASH.CASH | $49,751.40 | 28/06/2020 | 49% |
+| VODAFONE GRP | $26,382.46 | 05/02/2019 | 26.2% |
+
+```
+
+<IressTable
+  caption\="My investments"
+  rows\={\[
+    {
+      cost: 23898,
+      investmentDate: '2019-09-23',
+      investment\_name: 'Artemis Fund Managers Limited',
+      totalPercentage: 24.8
+    },
+    {
+      cost: 49751.4,
+      investmentDate: '2020-06-28',
+      investment\_name: 'CASH.CASH',
+      totalPercentage: 49
+    },
+    {
+      cost: 26382.456,
+      investmentDate: '2019-02-05',
+      investment\_name: 'VODAFONE GRP',
+      totalPercentage: 26.2
+    }
+  \]}
+  columns\={\[
+    {
+      key: 'investment\_name',
+      label: 'Investment (left)',
+      textAlign: 'left'
+    },
+    {
+      format: 'currency',
+      key: 'cost',
+      label: 'Cost (center)',
+      textAlign: 'center'
+    },
+    {
+      format: 'date',
+      key: 'investmentDate',
+      label: 'Date (center)',
+      textAlign: 'center'
+    },
+    {
+      format: 'percent',
+      key: 'totalPercentage',
+      label: 'Share (right)',
+      textAlign: 'right'
+    }
+  \]}
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alternate | 
+If set to true, the table will have alternating row colors. This is useful for improving readability in tables with many rows.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| caption\* | 
+
+Caption that describes the data in the table, required for accessibility.
+
+ReactNode
+
+
+
+ | \- | 
+
+"My investments"
+
+ |
+| children | 
+
+Multiple table elements can be passed as children. Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+
+ReactNode
+
+
+
+ | \- | \- |
+| columns | 
+
+A mapping of columns to be displayed in the table. If not provided, it will be automatically regenerated from the row data.
+
+TableColumn<TRow, TVal>\[\]
+
+ | \- | 
+
+RAW
+
+*   columns :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 3 keys
+        
+    *   1 :
+        
+        {...} 4 keys
+        
+    *   2 :
+        
+        {...} 4 keys
+        
+    *   3 :
+        
+        {...} 4 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| compact | 
+
+Compact view of the table, used for tables with a lot of data.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hover | 
+
+When set to true, hovering over a row will trigger a UI change.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeRowBorders | 
+
+If set to true, the table will not have borders between rows. This is useful for simpler tables where the row borders are not needed.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| rowProps | 
+
+Add additional props to the row element. Can be a props map or a function that returns an props map. The function is called with the row data.
+
+TableRowsProps\['rowProps'\]
+
+ | \- | Set object |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\]
+
+ | \[\] | 
+
+RAW
+
+*   rows :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 4 keys
+        
+    *   1 :
+        
+        {...} 4 keys
+        
+    *   2 :
+        
+        {...} 4 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| scope | 
+
+Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+
+union
+
+
+
+ | \- | 
+
+rowcol
+
+ |
+
+### Dividers
+
+As a general rule we don't add vertical column borders to our tables. Sometimes though, it can be useful to add a vertical divider between columns to help group content and create visual separation.
+
+To add a vertical divider you can set the `divider` prop in the `TableColumn` to true. This will add a vertical border to the end of the column.
+
+[](./iframe.html?id=components-table--dividers)
+
+My investments
+| Investment | Date | Share | Cost |
+| --- | --- | --- | --- |
+| Artemis Fund Managers Limited | 23/09/2019 | 24.8% | $23,898.00 |
+| CASH.CASH | 28/06/2020 | 49% | $49,751.40 |
+| VODAFONE GRP | 05/02/2019 | 26.2% | $26,382.46 |
+
+```
+
+<IressTable
+  caption\="My investments"
+  rows\={\[
+    {
+      cost: 23898,
+      investmentDate: '2019-09-23',
+      investment\_name: 'Artemis Fund Managers Limited',
+      totalPercentage: 24.8
+    },
+    {
+      cost: 49751.4,
+      investmentDate: '2020-06-28',
+      investment\_name: 'CASH.CASH',
+      totalPercentage: 49
+    },
+    {
+      cost: 26382.456,
+      investmentDate: '2019-02-05',
+      investment\_name: 'VODAFONE GRP',
+      totalPercentage: 26.2
+    }
+  \]}
+  columns\={\[
+    {
+      divider: true,
+      key: 'investment\_name',
+      label: 'Investment'
+    },
+    {
+      format: 'date',
+      key: 'investmentDate',
+      label: 'Date'
+    },
+    {
+      format: 'percent',
+      key: 'totalPercentage',
+      label: 'Share'
+    },
+    {
+      format: 'currency',
+      key: 'cost',
+      label: 'Cost'
+    }
+  \]}
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alternate | 
+If set to true, the table will have alternating row colors. This is useful for improving readability in tables with many rows.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| caption\* | 
+
+Caption that describes the data in the table, required for accessibility.
+
+ReactNode
+
+
+
+ | \- | 
+
+"My investments"
+
+ |
+| children | 
+
+Multiple table elements can be passed as children. Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+
+ReactNode
+
+
+
+ | \- | \- |
+| columns | 
+
+A mapping of columns to be displayed in the table. If not provided, it will be automatically regenerated from the row data.
+
+TableColumn<TRow, TVal>\[\]
+
+ | \- | 
+
+RAW
+
+*   columns :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 3 keys
+        
+    *   1 :
+        
+        {...} 3 keys
+        
+    *   2 :
+        
+        {...} 3 keys
+        
+    *   3 :
+        
+        {...} 3 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| compact | 
+
+Compact view of the table, used for tables with a lot of data.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hover | 
+
+When set to true, hovering over a row will trigger a UI change.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeRowBorders | 
+
+If set to true, the table will not have borders between rows. This is useful for simpler tables where the row borders are not needed.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| rowProps | 
+
+Add additional props to the row element. Can be a props map or a function that returns an props map. The function is called with the row data.
+
+TableRowsProps\['rowProps'\]
+
+ | \- | Set object |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\]
+
+ | \[\] | 
+
+RAW
+
+*   rows :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 4 keys
+        
+    *   1 :
+        
+        {...} 4 keys
+        
+    *   2 :
+        
+        {...} 4 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| scope | 
+
+Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+
+union
+
+
+
+ | \- | 
+
+rowcol
+
+ |
+
+### Highlight on hover
+
+This can be enabled by setting the `hover` prop. This will bring attention to the row the user is hovering over, allowing users to focus on the relationship between the columns of a specific row.
+
+[](./iframe.html?id=components-table--highlight-on-hover)
+
+My investments
+| Investment Name | Cost | Investment Date | Total Percentage |
+| --- | --- | --- | --- |
+| Artemis Fund Managers Limited | 23898 | 2019-09-23 | 24.8 |
+| CASH.CASH | 49751.4 | 2020-06-28 | 49 |
+| VODAFONE GRP | 26382.456 | 2019-02-05 | 26.2 |
+
+```
+
+<IressTable
+  caption\="My investments"
+  rows\={\[
+    {
+      cost: 23898,
+      investmentDate: '2019-09-23',
+      investment\_name: 'Artemis Fund Managers Limited',
+      totalPercentage: 24.8
+    },
+    {
+      cost: 49751.4,
+      investmentDate: '2020-06-28',
+      investment\_name: 'CASH.CASH',
+      totalPercentage: 49
+    },
+    {
+      cost: 26382.456,
+      investmentDate: '2019-02-05',
+      investment\_name: 'VODAFONE GRP',
+      totalPercentage: 26.2
+    }
+  \]}
+  hover
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alternate | 
+If set to true, the table will have alternating row colors. This is useful for improving readability in tables with many rows.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| caption\* | 
+
+Caption that describes the data in the table, required for accessibility.
+
+ReactNode
+
+
+
+ | \- | 
+
+"My investments"
+
+ |
+| children | 
+
+Multiple table elements can be passed as children. Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+
+ReactNode
+
+
+
+ | \- | \- |
+| columns | 
+
+A mapping of columns to be displayed in the table. If not provided, it will be automatically regenerated from the row data.
+
+TableColumn<TRow, TVal>\[\]
+
+ | \- | Set object |
+| compact | 
+
+Compact view of the table, used for tables with a lot of data.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hover | 
+
+When set to true, hovering over a row will trigger a UI change.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| removeRowBorders | 
+
+If set to true, the table will not have borders between rows. This is useful for simpler tables where the row borders are not needed.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| rowProps | 
+
+Add additional props to the row element. Can be a props map or a function that returns an props map. The function is called with the row data.
+
+TableRowsProps\['rowProps'\]
+
+ | \- | Set object |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\]
+
+ | \[\] | 
+
+RAW
+
+*   rows :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 4 keys
+        
+    *   1 :
+        
+        {...} 4 keys
+        
+    *   2 :
+        
+        {...} 4 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| scope | 
+
+Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+
+union
+
+
+
+ | \- | 
+
+rowcol
+
+ |
+
+### Scope
+
+`scope` defaults to row, which means the first cell in the row will be a `<th>`. When it is set to col the first cell in the row will be a `<td>`.
+
+[](./iframe.html?id=components-table--scope)
+
+My investments
+| Investment Name | Cost | Investment Date | Total Percentage |
+| --- | --- | --- | --- |
+| Artemis Fund Managers Limited | 23898 | 2019-09-23 | 24.8 |
+| CASH.CASH | 49751.4 | 2020-06-28 | 49 |
+| VODAFONE GRP | 26382.456 | 2019-02-05 | 26.2 |
+
+```
+
+<IressTable
+  caption\="My investments"
+  rows\={\[
+    {
+      cost: 23898,
+      investmentDate: '2019-09-23',
+      investment\_name: 'Artemis Fund Managers Limited',
+      totalPercentage: 24.8
+    },
+    {
+      cost: 49751.4,
+      investmentDate: '2020-06-28',
+      investment\_name: 'CASH.CASH',
+      totalPercentage: 49
+    },
+    {
+      cost: 26382.456,
+      investmentDate: '2019-02-05',
+      investment\_name: 'VODAFONE GRP',
+      totalPercentage: 26.2
+    }
+  \]}
+  scope\="col"
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alternate | 
+If set to true, the table will have alternating row colors. This is useful for improving readability in tables with many rows.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| caption\* | 
+
+Caption that describes the data in the table, required for accessibility.
+
+ReactNode
+
+
+
+ | \- | 
+
+"My investments"
+
+ |
+| children | 
+
+Multiple table elements can be passed as children. Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+
+ReactNode
+
+
+
+ | \- | \- |
+| columns | 
+
+A mapping of columns to be displayed in the table. If not provided, it will be automatically regenerated from the row data.
+
+TableColumn<TRow, TVal>\[\]
+
+ | \- | Set object |
+| compact | 
+
+Compact view of the table, used for tables with a lot of data.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hover | 
+
+When set to true, hovering over a row will trigger a UI change.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeRowBorders | 
+
+If set to true, the table will not have borders between rows. This is useful for simpler tables where the row borders are not needed.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| rowProps | 
+
+Add additional props to the row element. Can be a props map or a function that returns an props map. The function is called with the row data.
+
+TableRowsProps\['rowProps'\]
+
+ | \- | Set object |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\]
+
+ | \[\] | 
+
+RAW
+
+*   rows :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 4 keys
+        
+    *   1 :
+        
+        {...} 4 keys
+        
+    *   2 :
+        
+        {...} 4 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| scope | 
+
+Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+
+union
+
+
+
+ | \- | 
+
+rowcol
+
+ |
+
+### Hidden header
+
+For very simple tabular data, you have the option to hide the table header with the `hiddenHeader` prop. When this is set to true, the table header will not be rendered.
+
+[](./iframe.html?id=components-table--hidden-header)
+
+<table class="table__table table__table--compact_false table__table--hover_false table__table--sortButtonNoWrap_false table__table--tableBodyOpen_false table__table--alternate_false table__table--removeRowBorders_false ids-table" id="_r_v_"><caption id="_r_v_--caption" class="table__caption table__caption--compact_false table__caption--hover_false table__caption--sortButtonNoWrap_false table__caption--tableBodyOpen_false table__caption--alternate_false table__caption--removeRowBorders_false">My investments</caption><tbody><tr id="_r_v_--rows--0" class=""><th data-column="investment_name" id="_r_v___0_investment_name" scope="row">Artemis Fund Managers Limited</th><td data-column="cost" headers="_r_v___0_investment_name" id="_r_v___0_cost">23898</td><td data-column="investmentDate" headers="_r_v___0_investment_name" id="_r_v___0_investmentDate">2019-09-23</td><td data-column="totalPercentage" headers="_r_v___0_investment_name" id="_r_v___0_totalPercentage">24.8</td></tr><tr id="_r_v_--rows--1" class=""><th data-column="investment_name" id="_r_v___1_investment_name" scope="row">CASH.CASH</th><td data-column="cost" headers="_r_v___1_investment_name" id="_r_v___1_cost">49751.4</td><td data-column="investmentDate" headers="_r_v___1_investment_name" id="_r_v___1_investmentDate">2020-06-28</td><td data-column="totalPercentage" headers="_r_v___1_investment_name" id="_r_v___1_totalPercentage">49</td></tr><tr id="_r_v_--rows--2" class=""><th data-column="investment_name" id="_r_v___2_investment_name" scope="row">VODAFONE GRP</th><td data-column="cost" headers="_r_v___2_investment_name" id="_r_v___2_cost">26382.456</td><td data-column="investmentDate" headers="_r_v___2_investment_name" id="_r_v___2_investmentDate">2019-02-05</td><td data-column="totalPercentage" headers="_r_v___2_investment_name" id="_r_v___2_totalPercentage">26.2</td></tr></tbody></table>
+
+```
+
+<IressTable
+  caption\="My investments"
+  rows\={\[
+    {
+      cost: 23898,
+      investmentDate: '2019-09-23',
+      investment\_name: 'Artemis Fund Managers Limited',
+      totalPercentage: 24.8
+    },
+    {
+      cost: 49751.4,
+      investmentDate: '2020-06-28',
+      investment\_name: 'CASH.CASH',
+      totalPercentage: 49
+    },
+    {
+      cost: 26382.456,
+      investmentDate: '2019-02-05',
+      investment\_name: 'VODAFONE GRP',
+      totalPercentage: 26.2
+    }
+  \]}
+  hiddenHeader
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alternate | 
+If set to true, the table will have alternating row colors. This is useful for improving readability in tables with many rows.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| caption\* | 
+
+Caption that describes the data in the table, required for accessibility.
+
+ReactNode
+
+
+
+ | \- | 
+
+"My investments"
+
+ |
+| children | 
+
+Multiple table elements can be passed as children. Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+
+ReactNode
+
+
+
+ | \- | \- |
+| columns | 
+
+A mapping of columns to be displayed in the table. If not provided, it will be automatically regenerated from the row data.
+
+TableColumn<TRow, TVal>\[\]
+
+ | \- | Set object |
+| compact | 
+
+Compact view of the table, used for tables with a lot of data.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| hover | 
+
+When set to true, hovering over a row will trigger a UI change.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeRowBorders | 
+
+If set to true, the table will not have borders between rows. This is useful for simpler tables where the row borders are not needed.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| rowProps | 
+
+Add additional props to the row element. Can be a props map or a function that returns an props map. The function is called with the row data.
+
+TableRowsProps\['rowProps'\]
+
+ | \- | Set object |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\]
+
+ | \[\] | 
+
+RAW
+
+*   rows :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 4 keys
+        
+    *   1 :
+        
+        {...} 4 keys
+        
+    *   2 :
+        
+        {...} 4 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| scope | 
+
+Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+
+union
+
+
+
+ | \- | 
+
+rowcol
+
+ |
+
+### Rich rows (JSX)
+
+The `rows` prop allows you to use `ReactNodes` as the value of a cell. This can be useful for adding rich content to a cell, such as links, buttons or icons.
+
+**Note:** If you are using the `sort` property, the sorting may not work properly with rich content. If this happens, either remove the `sort` property or use the `format` prop on the column to set a custom formatter.
+
+[](./iframe.html?id=components-table--rich-rows)
+
+My rich investments
+| Investment Name | Cost | Investment Date | Total Percentage |
+| --- | --- | --- | --- |
+| Artemis Fund Managers Limited | $23,898 | 2019/09/23 | 24.8% |
+| CASH.CASH | $49,751.40 | 2020/06/28 | 49% |
+| VODAFONE GRP | $26,382.46 | 2019/02/05 | 26.2% |
+
+```
+
+<IressTable
+  caption\="My rich investments"
+  rows\={\[
+    {
+      cost: '$23,898',
+      investmentDate: '2019/09/23',
+      investment\_name: <IressButton\>Artemis Fund Managers Limited</IressButton\>,
+      totalPercentage: <IressBadge mode\="info"\>24.8%</IressBadge\>
+    },
+    {
+      cost: '$49,751.40',
+      investmentDate: '2020/06/28',
+      investment\_name: <IressButton\>CASH.CASH</IressButton\>,
+      totalPercentage: <IressBadge mode\="success"\>49%</IressBadge\>
+    },
+    {
+      cost: '$26,382.46',
+      investmentDate: '2019/02/05',
+      investment\_name: <IressButton\>VODAFONE GRP</IressButton\>,
+      totalPercentage: <IressBadge mode\="info"\>26.2%</IressBadge\>
+    }
+  \]}
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alternate | 
+If set to true, the table will have alternating row colors. This is useful for improving readability in tables with many rows.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| caption\* | 
+
+Caption that describes the data in the table, required for accessibility.
+
+ReactNode
+
+
+
+ | \- | 
+
+"My rich investments"
+
+ |
+| children | 
+
+Multiple table elements can be passed as children. Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+
+ReactNode
+
+
+
+ | \- | \- |
+| columns | 
+
+A mapping of columns to be displayed in the table. If not provided, it will be automatically regenerated from the row data.
+
+TableColumn<TRow, TVal>\[\]
+
+ | \- | Set object |
+| compact | 
+
+Compact view of the table, used for tables with a lot of data.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hover | 
+
+When set to true, hovering over a row will trigger a UI change.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeRowBorders | 
+
+If set to true, the table will not have borders between rows. This is useful for simpler tables where the row borders are not needed.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| rowProps | 
+
+Add additional props to the row element. Can be a props map or a function that returns an props map. The function is called with the row data.
+
+TableRowsProps\['rowProps'\]
+
+ | \- | Set object |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\]
+
+ | \[\] | 
+
+RAW
+
+*   rows :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 4 keys
+        
+    *   1 :
+        
+        {...} 4 keys
+        
+    *   2 :
+        
+        {...} 4 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| scope | 
+
+Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+
+union
+
+
+
+ | \- | 
+
+rowcol
+
+ |
+
+### Empty state
+
+You can provide the table with some content to display when there is no row data by using the `empty` prop.
+
+This is reliant on `columns` prop to provide the information for the table header. If `columns` is not provided and there is no row data the table will not render.
+
+[](./iframe.html?id=components-table--empty-state)
+
+| Investment | Date | Share | Cost |
+| --- | --- | --- | --- |
+| This table has no data |
+
+```
+
+<IressTable
+  columns\={\[
+    {
+      divider: true,
+      key: 'investment\_name',
+      label: 'Investment'
+    },
+    {
+      format: 'date',
+      key: 'investmentDate',
+      label: 'Date'
+    },
+    {
+      format: 'percent',
+      key: 'totalPercentage',
+      label: 'Share'
+    },
+    {
+      format: 'currency',
+      key: 'cost',
+      label: 'Cost',
+      textAlign: 'right'
+    }
+  \]}
+  empty\="This table has no data"
+  rows\={\[\]}
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alternate | 
+If set to true, the table will have alternating row colors. This is useful for improving readability in tables with many rows.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| caption\* | 
+
+Caption that describes the data in the table, required for accessibility.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| children | 
+
+Multiple table elements can be passed as children. Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+
+ReactNode
+
+
+
+ | \- | \- |
+| columns | 
+
+A mapping of columns to be displayed in the table. If not provided, it will be automatically regenerated from the row data.
+
+TableColumn<TRow, TVal>\[\]
+
+ | \- | 
+
+RAW
+
+*   columns :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 3 keys
+        
+    *   1 :
+        
+        {...} 3 keys
+        
+    *   2 :
+        
+        {...} 3 keys
+        
+    *   3 :
+        
+        {...} 4 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| compact | 
+
+Compact view of the table, used for tables with a lot of data.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+
+
+ | \- | 
+
+"This table has no data"
+
+ |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hover | 
+
+When set to true, hovering over a row will trigger a UI change.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeRowBorders | 
+
+If set to true, the table will not have borders between rows. This is useful for simpler tables where the row borders are not needed.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| rowProps | 
+
+Add additional props to the row element. Can be a props map or a function that returns an props map. The function is called with the row data.
+
+TableRowsProps\['rowProps'\]
+
+ | \- | Set object |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\]
+
+ | \[\] | 
+
+RAW
+
+*   rows :
+    
+    \[
+    
+    \]
+    
+
+
+
+ |
+| scope | 
+
+Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+
+union
+
+
+
+ | \- | 
+
+rowcol
+
+ |
+
+### Static table
+
+If you don't need all the fancy features of the table component, but would still like a styled table, you can use the `children` prop.
+
+It accepts any of the table sub-elements. To ensure best display, please make use of the `thead` and `tbody` tags.
+
+**Note:** Only the `caption`, `hiddenCaption`, `hiddenHeader` and `hover` props are supported when using `children` to render a table.
+
+[](./iframe.html?id=components-table--static)
+
+My investments
+| Investment | Cost | Investment date | Share |
+| --- | --- | --- | --- |
+| Artemis Fund Managers Limited | $23,898 | 2019/09/23 | 24.8% |
+| CASH.CASH | $49,751.40 | 2020/06/28 | 49% |
+| VODAFONE GRP | $26,382.46 | 2019/02/05 | 26.2% |
+
+```
+
+<IressTable caption\="My investments"\>
+  <thead\>
+    <tr\>
+      <th\>
+        Investment      </th\>
+      <th\>
+        Cost      </th\>
+      <th\>
+        Investment date      </th\>
+      <th\>
+        Share      </th\>
+    </tr\>
+  </thead\>
+  <tbody\>
+    <tr\>
+      <th\>
+        Artemis Fund Managers Limited      </th\>
+      <td\>
+        $23,898      </td\>
+      <td\>
+        2019/09/23      </td\>
+      <td\>
+        24.8%      </td\>
+    </tr\>
+    <tr\>
+      <th\>
+        CASH.CASH      </th\>
+      <td\>
+        $49,751.40      </td\>
+      <td\>
+        2020/06/28      </td\>
+      <td\>
+        49%      </td\>
+    </tr\>
+    <tr\>
+      <th\>
+        VODAFONE GRP      </th\>
+      <td\>
+        $26,382.46      </td\>
+      <td\>
+        2019/02/05      </td\>
+      <td\>
+        26.2%      </td\>
+    </tr\>
+  </tbody\>
+</IressTable\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alternate | 
+If set to true, the table will have alternating row colors. This is useful for improving readability in tables with many rows.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| caption\* | 
+
+Caption that describes the data in the table, required for accessibility.
+
+ReactNode
+
+
+
+ | \- | 
+
+"My investments"
+
+ |
+| children | 
+
+Multiple table elements can be passed as children. Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+
+ReactNode
+
+
+
+ | \- | \- |
+| columns | 
+
+A mapping of columns to be displayed in the table. If not provided, it will be automatically regenerated from the row data.
+
+TableColumn<TRow, TVal>\[\]
+
+ | \- | Set object |
+| compact | 
+
+Compact view of the table, used for tables with a lot of data.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hover | 
+
+When set to true, hovering over a row will trigger a UI change.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeRowBorders | 
+
+If set to true, the table will not have borders between rows. This is useful for simpler tables where the row borders are not needed.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| rowProps | 
+
+Add additional props to the row element. Can be a props map or a function that returns an props map. The function is called with the row data.
+
+TableRowsProps\['rowProps'\]
+
+ | \- | Set object |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\]
+
+ | \[\] | Set object |
+| scope | 
+
+Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+
+union
+
+
+
+ | \- | 
+
+rowcol
+
+ |
+
+### Row props
+
+You can customise the rows by passing in a `rowProps` object or function. It accepts a map of table row props that can be passed to a `tr` element, or a function that accepts the row data currently being rendered, and returns a map of table props.
+
+[](./iframe.html?id=components-table--row-props)
+
+My investments
+| Investment Name | Cost | Investment Date | Total Percentage |
+| --- | --- | --- | --- |
+| Artemis Fund Managers Limited | 23898 | 2019-09-23 | 24.8 |
+| CASH.CASH | 49751.4 | 2020-06-28 | 49 |
+| VODAFONE GRP | 26382.456 | 2019-02-05 | 26.2 |
+
+```
+
+<IressTable
+  caption\="My investments"
+  rows\={\[
+    {
+      cost: 23898,
+      investmentDate: '2019-09-23',
+      investment\_name: 'Artemis Fund Managers Limited',
+      totalPercentage: 24.8
+    },
+    {
+      cost: 49751.4,
+      investmentDate: '2020-06-28',
+      investment\_name: 'CASH.CASH',
+      totalPercentage: 49
+    },
+    {
+      cost: 26382.456,
+      investmentDate: '2019-02-05',
+      investment\_name: 'VODAFONE GRP',
+      totalPercentage: 26.2
+    }
+  \]}
+  rowProps\={(row) \=> ({
+      bg: row.original.cost && row.original.cost \> 30000 ? "colour.neutral.10" : "colour.system.success.surface"
+    })}
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alternate | 
+If set to true, the table will have alternating row colors. This is useful for improving readability in tables with many rows.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| caption\* | 
+
+Caption that describes the data in the table, required for accessibility.
+
+ReactNode
+
+
+
+ | \- | 
+
+"My investments"
+
+ |
+| children | 
+
+Multiple table elements can be passed as children. Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+
+ReactNode
+
+
+
+ | \- | \- |
+| columns | 
+
+A mapping of columns to be displayed in the table. If not provided, it will be automatically regenerated from the row data.
+
+TableColumn<TRow, TVal>\[\]
+
+ | \- | Set object |
+| compact | 
+
+Compact view of the table, used for tables with a lot of data.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hover | 
+
+When set to true, hovering over a row will trigger a UI change.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeRowBorders | 
+
+If set to true, the table will not have borders between rows. This is useful for simpler tables where the row borders are not needed.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| rowProps | 
+
+Add additional props to the row element. Can be a props map or a function that returns an props map. The function is called with the row data.
+
+TableRowsProps\['rowProps'\]
+
+ | \- | 
+
+ |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\]
+
+ | \[\] | 
+
+RAW
+
+*   rows :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 4 keys
+        
+    *   1 :
+        
+        {...} 4 keys
+        
+    *   2 :
+        
+        {...} 4 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| scope | 
+
+Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+
+union
+
+
+
+ | \- | 
+
+rowcol
+
+ |
+
+### Compact
+
+The `compact` prop can be used to reduce the padding around the table cells and reduce the font size. This can be useful when you have a lot of data to display and allow users to see as many columns as possible.
+
+[](./iframe.html?id=components-table--compact)
+
+My investments
+| Investment Name | Cost | Investment Date | Total Percentage |
+| --- | --- | --- | --- |
+| Artemis Fund Managers Limited | 23898 | 2019-09-23 | 24.8 |
+| CASH.CASH | 49751.4 | 2020-06-28 | 49 |
+| VODAFONE GRP | 26382.456 | 2019-02-05 | 26.2 |
+
+```
+
+<IressTable
+  caption\="My investments"
+  rows\={\[
+    {
+      cost: 23898,
+      investmentDate: '2019-09-23',
+      investment\_name: 'Artemis Fund Managers Limited',
+      totalPercentage: 24.8
+    },
+    {
+      cost: 49751.4,
+      investmentDate: '2020-06-28',
+      investment\_name: 'CASH.CASH',
+      totalPercentage: 49
+    },
+    {
+      cost: 26382.456,
+      investmentDate: '2019-02-05',
+      investment\_name: 'VODAFONE GRP',
+      totalPercentage: 26.2
+    }
+  \]}
+  compact
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| alternate | 
+If set to true, the table will have alternating row colors. This is useful for improving readability in tables with many rows.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| caption\* | 
+
+Caption that describes the data in the table, required for accessibility.
+
+ReactNode
+
+
+
+ | \- | 
+
+"My investments"
+
+ |
+| children | 
+
+Multiple table elements can be passed as children. Used to create a static table, or add a `<tfoot />` element to a `rows` based table.
+
+ReactNode
+
+
+
+ | \- | \- |
+| columns | 
+
+A mapping of columns to be displayed in the table. If not provided, it will be automatically regenerated from the row data.
+
+TableColumn<TRow, TVal>\[\]
+
+ | \- | Set object |
+| compact | 
+
+Compact view of the table, used for tables with a lot of data.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | FalseTrue |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| hover | 
+
+When set to true, hovering over a row will trigger a UI change.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| removeRowBorders | 
+
+If set to true, the table will not have borders between rows. This is useful for simpler tables where the row borders are not needed.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| rowProps | 
+
+Add additional props to the row element. Can be a props map or a function that returns an props map. The function is called with the row data.
+
+TableRowsProps\['rowProps'\]
+
+ | \- | Set object |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\]
+
+ | \[\] | 
+
+RAW
+
+*   rows :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 4 keys
+        
+    *   1 :
+        
+        {...} 4 keys
+        
+    *   2 :
+        
+        {...} 4 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| scope | 
+
+Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+
+union
+
+
+
+ | \- | 
+
+rowcol
+
+ |
+
+`IressTableBody`
+----------------
+
+In some cases you may have a table with multiple groups of rows inside it, however the columns are the same. For these cases, you can use the `IressTableBody` component.
+
+[](./iframe.html?id=components-table-body--body)
+
+<table class="table__table table__table--compact_false table__table--hover_false table__table--sortButtonNoWrap_false table__table--tableBodyOpen_false table__table--alternate_false table__table--removeRowBorders_false ids-table" id="_r_18_"><caption id="_r_18_--caption" class="table__caption table__caption--compact_false table__caption--hover_false table__caption--sortButtonNoWrap_false table__caption--tableBodyOpen_false table__caption--alternate_false table__caption--removeRowBorders_false">My liabilities</caption><tbody aria-labelledby="_r_19_--caption" class=""><tr><th aria-expanded="true" colspan="8" class="table__rowGroupHeader table__rowGroupHeader--compact_false table__rowGroupHeader--hover_false table__rowGroupHeader--sortButtonNoWrap_false table__rowGroupHeader--tableBodyOpen_true" id="_r_19_--caption" scope="rowgroup" aria-controls="_r_19_--header--0 _r_19_--rows--0 _r_19_--children"><button class="table__activator table__activator--compact_false table__activator--hover_false table__activator--sortButtonNoWrap_false table__activator--tableBodyOpen_true" type="button">Current liabilities</button></th></tr><tr id="_r_19_--header--0"><th id="_r_19___owner" headers="_r_19_--caption" class="ta_start" style="width: 75px; min-width: 75px;">Owner</th><th id="_r_19___type" headers="_r_19_--caption" class="ta_start" style="width: 100px; min-width: 100px;">Type</th><th id="_r_19___provider" headers="_r_19_--caption" class="ta_start">Provider</th><th id="_r_19___status" headers="_r_19_--caption" class="ta_start bd-e_table">Status</th><th id="_r_19___frequency" headers="_r_19_--caption" class="ta_start">Frequency</th><th id="_r_19___outstanding" headers="_r_19_--caption" aria-sort="none" class="ta_start [&amp;&amp;]:ta_end"><button type="button" class="table__sortHeader table__sortHeader--compact_false table__sortHeader--hover_false table__sortHeader--sortButtonNoWrap_true table__sortHeader--tableBodyOpen_false">Outstanding (GBP)<span role="img" class="ids-icon fal fa-sort table__sortIcon table__sortIcon--compact_false table__sortIcon--hover_false table__sortIcon--sortButtonNoWrap_true table__sortIcon--tableBodyOpen_false" aria-hidden="false" aria-label="sortable"></span></button></th><th id="_r_19___interestRate" headers="_r_19_--caption" aria-sort="none" class="ta_right"><button type="button" class="table__sortHeader table__sortHeader--compact_false table__sortHeader--hover_false table__sortHeader--sortButtonNoWrap_true table__sortHeader--tableBodyOpen_false">Interest rate p.a.<span role="img" class="ids-icon fal fa-sort table__sortIcon table__sortIcon--compact_false table__sortIcon--hover_false table__sortIcon--sortButtonNoWrap_true table__sortIcon--tableBodyOpen_false" aria-hidden="false" aria-label="sortable"></span></button></th><th id="_r_19___repayment" headers="_r_19_--caption" aria-sort="none" class="ta_start [&amp;&amp;]:ta_end"><button type="button" class="table__sortHeader table__sortHeader--compact_false table__sortHeader--hover_false table__sortHeader--sortButtonNoWrap_true table__sortHeader--tableBodyOpen_false">Repayment (GBP)<span role="img" class="ids-icon fal fa-sort table__sortIcon table__sortIcon--compact_false table__sortIcon--hover_false table__sortIcon--sortButtonNoWrap_true table__sortIcon--tableBodyOpen_false" aria-hidden="false" aria-label="sortable"></span></button></th></tr><tr id="_r_19_--rows--0" class=""><td data-column="owner" headers="_r_19___owner _r_19_--caption" id="_r_19___0_owner" class="ta_start" style="width: 75px; min-width: 75px;">Client</td><td data-column="type" headers="_r_19___type _r_19_--caption" id="_r_19___0_type" class="ta_start" style="width: 100px; min-width: 100px;">Credit card</td><td data-column="provider" headers="_r_19___provider _r_19_--caption" id="_r_19___0_provider" class="ta_start"></td><td data-column="status" headers="_r_19___status _r_19_--caption" id="_r_19___0_status" class="ta_start bd-e_table">Current</td><td data-column="frequency" headers="_r_19___frequency _r_19_--caption" id="_r_19___0_frequency" class="ta_start">Monthly</td><td data-column="outstanding" headers="_r_19___outstanding _r_19_--caption" id="_r_19___0_outstanding" class="ta_start [&amp;&amp;]:ta_end">$5,000.00</td><td data-column="interestRate" headers="_r_19___interestRate _r_19_--caption" id="_r_19___0_interestRate" class="ta_right">0%</td><td data-column="repayment" headers="_r_19___repayment _r_19_--caption" id="_r_19___0_repayment" class="ta_start [&amp;&amp;]:ta_end">$300.00</td></tr><tr id="_r_19_--children"><td colspan="8"><button type="button" class="iress-form-element iress-form-element__inner button__root button__root--inButtonGroup_false button__root--mode_secondary button__root--loading_false button__root--noWrap_false ids-button"><span class="button__prepend button__prepend--inButtonGroup_false button__prepend--mode_secondary button__prepend--loading_false button__prepend--noWrap_false"><span role="img" class="ids-icon fal fa-plus-circle" aria-hidden="true"></span></span>Add current liability</button></td></tr></tbody><tbody aria-labelledby="_r_1b_--caption" class=""><tr><th aria-expanded="false" colspan="8" class="table__rowGroupHeader table__rowGroupHeader--compact_false table__rowGroupHeader--hover_false table__rowGroupHeader--sortButtonNoWrap_false table__rowGroupHeader--tableBodyOpen_false" id="_r_1b_--caption" scope="rowgroup"><button class="table__activator table__activator--compact_false table__activator--hover_false table__activator--sortButtonNoWrap_false table__activator--tableBodyOpen_false" type="button">Long term liabilities</button></th></tr></tbody><tbody aria-labelledby="_r_1c_--caption" class=""><tr><th aria-expanded="false" colspan="8" class="table__rowGroupHeader table__rowGroupHeader--compact_false table__rowGroupHeader--hover_false table__rowGroupHeader--sortButtonNoWrap_false table__rowGroupHeader--tableBodyOpen_false" id="_r_1c_--caption" scope="rowgroup"><button class="table__activator table__activator--compact_false table__activator--hover_false table__activator--sortButtonNoWrap_false table__activator--tableBodyOpen_false" type="button">Contingent liabilities</button></th></tr></tbody></table>
+
+```
+
+interface Liability {
+  owner: string;
+  type: string;
+  provider?: string;
+  status: string;
+  outstanding: number;
+  interestRate: number;
+  repayment: number;
+  frequency: string;
+}
+const currentLiabilities \= \[
+  {
+    owner: 'Client',
+    type: 'Credit card',
+    status: 'Current',
+    outstanding: 5000,
+    interestRate: 0,
+    repayment: 300,
+    frequency: 'Monthly',
+  },
+\];
+const longTermLiabilities \= \[
+  {
+    owner: 'Joint',
+    type: 'Primary residence mortgage',
+    provider: 'Other',
+    status: 'Current',
+    outstanding: 1000000,
+    interestRate: 0,
+    repayment: 0,
+    frequency: 'Monthly',
+  },
+  {
+    owner: 'Joint',
+    type: 'Buy to let mortgage',
+    status: 'Current',
+    outstanding: 1000000,
+    interestRate: 0,
+    repayment: 0,
+    frequency: 'Monthly',
+  },
+  {
+    owner: 'Joint',
+    type: 'Buy to let mortgage',
+    status: 'Current',
+    outstanding: 5000,
+    interestRate: 0,
+    repayment: 0,
+    frequency: 'Monthly',
+  },
+\];
+const contingentLiabilities \= \[
+  {
+    owner: 'Partner',
+    type: 'Limited',
+    status: 'Current',
+    outstanding: 1000,
+    interestRate: 0,
+    repayment: 100,
+    frequency: 'Monthly',
+  },
+\];
+const columns: TableColumn<Liability\>\[\] \= \[
+  {
+    key: 'owner',
+    label: 'Owner',
+    width: '75px',
+  },
+  {
+    key: 'type',
+    label: 'Type',
+    width: '100px',
+  },
+  {
+    key: 'provider',
+    label: 'Provider',
+  },
+  {
+    key: 'status',
+    label: 'Status',
+    divider: true,
+  },
+  {
+    key: 'frequency',
+    label: 'Frequency',
+  },
+  {
+    key: 'outstanding',
+    label: 'Outstanding (GBP)',
+    format: 'currency',
+    currencyCode: '',
+    sort: true,
+  },
+  {
+    key: 'interestRate',
+    label: 'Interest rate p.a.',
+    format: 'percent',
+    textAlign: 'right',
+    sort: true,
+  },
+  {
+    key: 'repayment',
+    label: 'Repayment (GBP)',
+    format: 'currency',
+    currencyCode: '',
+    sort: true,
+  },
+\];
+export const TableGroupedRows \= () \=> (
+  <IressTable caption\="My liabilities"\>
+    <IressTableBody
+      rows\={currentLiabilities}
+      columns\={columns}
+      caption\="Current liabilities"
+      scope\="col"
+      open
+    \>
+      <IressButton prepend\={<IressIcon name\="plus-circle" />}\>
+        Add current liability      </IressButton\>
+    </IressTableBody\>
+    <IressTableBody
+      rows\={longTermLiabilities}
+      columns\={columns}
+      caption\="Long term liabilities"
+      scope\="col"
+    \>
+      <IressButton prepend\={<IressIcon name\="plus-circle" />}\>
+        Add long term liability      </IressButton\>
+    </IressTableBody\>
+    <IressTableBody
+      rows\={contingentLiabilities}
+      columns\={columns}
+      caption\="Contingent liabilities"
+      scope\="col"
+    \>
+      <IressButton prepend\={<IressIcon name\="plus-circle" />}\>
+        Add contingent liability      </IressButton\>
+    </IressTableBody\>
+  </IressTable\>
+);
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| caption\* | 
+Caption that describes the data in the inner table, required for accessibility. Used to open/close the inner table.
+
+**Note:** Do not include interactive elements inside the caption.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden. If set, the inner table will always be open.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| onClosed | 
+
+Is called when table is closed.
+
+() => void
+
+ | \- | \- |
+| onOpened | 
+
+Is called when table is opened.
+
+() => void
+
+ | \- | \- |
+| open | 
+
+When true, all rows will be visible, otherwise they are hidden.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | Set boolean |
+| rows | 
+
+ | \[\] | Set object |
+
+`IressTableFormattedValue`
+--------------------------
+
+`IressTableFormattedValue` is the component used to format the table columns when the `format` property is not a render function.
+
+It has been exposed so you can use it in your own components to format values in the same way as the table component.
+
+[](./iframe.html?id=components-table-formattedvalue--formatted-value)
+
+IressTableFormattedValue
+| Mode | Example |
+| --- | --- |
+| string | string |
+| number | 10000 |
+| date | 14/11/2025 |
+| shortDate | 14 Nov 2025 |
+| isoDateTime | 2025-11-14 00:00:00 (UTC) |
+| relativeTime | 5 days ago |
+| currency | $10,000.00 |
+| percent | 50% |
+
+```
+
+{
+  args: {
+    value: '100'
+  },
+  argTypes: {
+    ...disableArgTypes(\['format', 'value'\])
+  },
+  render: () \=> <IressTable caption\="IressTableFormattedValue" rows\={\[{
+    mode: 'string',
+    example: <IressTableFormattedValue value\="string" format\="string" />
+  }, {
+    mode: 'number',
+    example: <IressTableFormattedValue value\="10000" format\="number" />
+  }, {
+    mode: 'date',
+    example: <IressTableFormattedValue value\={new Date('2025-11-14')} format\="date" />
+  }, {
+    mode: 'shortDate',
+    example: <IressTableFormattedValue value\={new Date('2025-11-14')} format\="shortDate" />
+  }, {
+    mode: 'isoDateTime',
+    example: <IressTableFormattedValue value\={new Date('2025-11-14')} format\="isoDateTime" />
+  }, {
+    mode: 'relativeTime',
+    example: <IressTableFormattedValue value\={fourDaysAgo} format\="relativeTime" />
+  }, {
+    mode: 'currency',
+    example: <IressTableFormattedValue value\={10000} format\="currency" />
+  }, {
+    mode: 'percent',
+    example: <IressTableFormattedValue value\={50} format\="percent" />
+  }\]} />
+}
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| format | 
+\-
+
+ | \- | \- |
+| value | 
+
+string
+
+
+
+ | \- | \- |