@iress-oss/ids-mcp-server 5.15.0 → 6.0.0-alpha.0

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

@@ -6,6 +6,14 @@ 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.
+
 My investments
 | Investment Name | Cost | Investment Date | Total Percentage |
 | --- | --- | --- | --- |
@@ -43,6 +51,520 @@ Hide code
 
 Copy
 
+[](#props)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.
+
+booleanundefined
+
+
+
+ | 
+
+false
+
+ | Set object |
+| bg | 
+
+**`bg`** sets the background color of an element using the `background-color` css property using the color tokens in the design system.
+
+We recommend using the following token values for best background contrast:
+
+*   `colour.primary.fill` for primary backgrounds that need to stand out
+*   `colour.primary.surface` for primary backgrounds that need to be less prominent
+*   `colour.neutral.10` for the base background color, normally white in light mode or shade of grey in dark mode
+*   `colour.neutral.20` for a slightly darker background color, used in neutral state components
+*   `colour.system.danger.fill` for error backgrounds that need to stand out
+*   `colour.system.danger.surface` for error backgrounds that need to be less prominent
+*   `colour.system.success.fill` for success backgrounds that need to stand out
+*   `colour.system.success.surface` for success backgrounds that need to be less prominent
+*   `colour.system.warning.fill` for warning backgrounds that need to stand out
+*   `colour.system.warning.surface` for warning backgrounds that need to be less prominent
+*   `colour.system.info.fill` for info backgrounds that need to stand out
+*   `colour.system.info.surface` for info backgrounds that need to be less prominent
+
+ResponsiveProp<ColorToken> | undefined
+
+ | \- | Set object |
+| borderRadius | 
+
+The **`border-radius`** CSS property rounds the corners of an element's outer border edge using the radius tokens in the design system.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **4** | **4** | **5** | **12** | **9** |
+| 1 _\-x-_ |  | 3 _\-x-_ |  |  |
+
+ResponsiveProp<RadiusToken> | undefined
+
+ | \- | Set object |
+| caption\* | 
+
+Caption that describes the data in the table, required for accessibility.
+
+ReactNode
+
+
+
+ | \- | 
+
+"My investments"
+
+ |
+| children | 
+
+\-
+
+ | \- | \- |
+| color | 
+
+The **`color`** CSS property sets the foreground color value of an element's text and text decorations using the colour tokens from the design system. It also sets the `currentcolor` value. `currentcolor` may be used as an indirect value on _other_ properties and is the default for other color properties, such as `border-color`.
+
+We recommend using the following token values for best color contrast:
+
+*   `colour.primary.onFill` used on top of `colour.primary.fill` for primary text that needs to stand out
+*   `colour.primary.text` used on top of `colour.primary.surface` or `colour.neutral.10` for primary text that needs to be less prominent
+*   `colour.neutral.70` used on top of `colour.neutral.10` or `colour.neutral.20` for muted text
+*   `colour.neutral.80` used on top of `colour.neutral.10` or `colour.neutral.20` for standard text
+*   `colour.system.danger.onFill` used on top of `colour.system.danger.fill` for error text that needs to stand out
+*   `colour.system.danger.text` used on top of `colour.system.danger.surface` for error text that needs to be less prominent
+*   `colour.system.success.onFill` used on top of `colour.system.success.fill` for success text that needs to stand out
+*   `colour.system.success.text` used on top of `colour.system.success.surface` for success text that needs to be less prominent
+*   `colour.system.warning.onFill` used on top of `colour.system.warning.fill` for warning text that needs to stand out
+*   `colour.system.warning.text` used on top of `colour.system.warning.surface` for warning text that needs to be less prominent
+*   `colour.system.info.onFill` used on top of `colour.system.info.fill` for informative text that needs to stand out
+*   `colour.system.info.text` used on top of `colour.system.info.surface` for informative text that needs to be less prominent
+
+ResponsiveProp<ColorToken> | undefined
+
+ | \- | Set object |
+| 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>\[\] | undefined
+
+ | \- | Set object |
+| compact | 
+
+Compact view of the table, used for tables with a lot of data.
+
+booleanundefined
+
+
+
+ | 
+
+false
+
+ | Set object |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+
+
+ | \- | Set object |
+| focusable | 
+
+The `focusable` prop is used to apply the focus elevation when focused. It can be set to `true` to apply focus styles on focus, or `'within'` to apply focus styles when the element or any of its children are focused.
+
+"true""within"undefined
+
+
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden.
+
+booleanundefined
+
+
+
+ | \- | Set object |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+booleanundefined
+
+
+
+ | \- | Set object |
+| hide | 
+
+Set **`hide`** to hide an element completely using `display: none`. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
+
+Hide on all breakpoints: `hide: true` Hide on specific breakpoints: `hide: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
+
+Notes:
+
+*   If you need to hide an element but allow it to be visible to screen readers, use the `srOnly` prop instead.
+*   Consider if you can conditionally render the element instead of hiding it.
+
+ResponsiveProp<boolean> | undefined
+
+ | \- | Set object |
+| hover | 
+
+When set to true, hovering over a row will trigger a UI change.
+
+booleanundefined
+
+
+
+ | \- | Set object |
+| layerStyle | 
+
+Elevate a layer by using a **`layerStyle`**. These are connected to the elevation tokens in the design system. They can be combined to create hierarchy and structure.
+
+*   `elevation.raised`: Raised elevations sit slightly higher than other content. They are reserved for cards that can be moved, such as Jira issue cards and Trello cards. In special circumstances, they can be used for cards as a way to provide additional heirarchy or emphasis.
+*   `elevation.floating`: Floating is the highest elevation available. It is reserved for a UI that sits over another UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons.
+*   `elevation.overflow`: Overflow is a shadow indicating content has scrolled outside a view. It can be used for vertical or horizontal scroll. An example of overflow shadows is the horizontal scroll in tables on a Confluence page.
+
+ResponsiveProp<"elevation.raised" | "elevation.floating" | "elevation.overflow" | "elevation.focus" | "elevation.focusCompact"> | undefined
+
+ | \- | Set object |
+| m | 
+
+The **`m`** property is short for `margin`, and sets the margin area on all four sides of an element.
+
+It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<SpacingToken | "auto"> | undefined
+
+ | \- | Set object |
+| maxWidth | 
+
+The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **7** |
+
+ResponsiveProp<"auto" | SizeToken | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | ... 8 more ... | "11/12"> | undefined
+
+ | \- | Set object |
+| mb | 
+
+The **`mb`** property is short for `margin-bottom` and sets the margin area on the bottom side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+
+It uses the spacing tokens in the design system.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<SpacingToken | "auto"> | undefined
+
+ | \- | Set object |
+| ml | 
+
+The **`ml`** property is short for `margin-left` and sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+
+It uses the spacing tokens in the design system.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<SpacingToken | "auto"> | undefined
+
+ | \- | Set object |
+| mr | 
+
+The **`mr`** property is short for `margin-right` and sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+
+It uses the spacing tokens in the design system.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<SpacingToken | "auto"> | undefined
+
+ | \- | Set object |
+| mt | 
+
+The **`mt`** property is short for `margin-top` and sets the margin area on the top side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+
+It uses the spacing tokens in the design system.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<SpacingToken | "auto"> | undefined
+
+ | \- | Set object |
+| mx | 
+
+The **`mx`** property is short for `margin-inline`. It is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
+
+It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<SpacingToken | "auto"> | undefined
+
+ | \- | Set object |
+| my | 
+
+The **`my`** property is short for `margin-block`. It defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
+
+It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<SpacingToken | "auto"> | undefined
+
+ | \- | Set object |
+| noGutter | 
+
+The **`noGutter`** property is used to remove the bottom margin from the last child of a component. This is useful when you want to avoid extra spacing at the end of a layout.
+
+booleanundefined
+
+
+
+ | \- | Set object |
+| p | 
+
+The **`p`** property is short for `padding`, and sets the padding area on all four sides of an element at once.
+
+It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| pb | 
+
+The **`pb`** property is short for `padding-bottom` and sets the padding area on the bottom side of an element.
+
+It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| pl | 
+
+The **`pl`** property is short for `padding-left` and sets the padding area on the left side of an element.
+
+It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| pr | 
+
+The **`pr`** property is short for `padding-right` and sets the padding area on the right side of an element.
+
+It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| pt | 
+
+The **`pt`** property is short for `padding-top` and sets the padding area on the top side of an element.
+
+It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| px | 
+
+The **`px`** property is short for `padding-inline`. It is a shorthand property that defines both the logical inline start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
+
+It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| py | 
+
+The **`py`** property is short for `padding-block`. It defines the logical block start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
+
+It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| 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.
+
+booleanundefined
+
+
+
+ | 
+
+false
+
+ | Set object |
+| rowGap | 
+
+The **`row-gap`** CSS property sets the size of the gap (gutter) between an element's rows.
+
+Note: It only has an effect when used as a direct child of a layout component, such as IressRow, IressStack or IressInline.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **47** | **52** | **10.1** | **16** | No |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| 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.
+
+IressStyledProps<"tr"> | ((row: Row<TRow>) => IressStyledProps<"tr">) | undefined
+
+ | \- | Set object |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\] | undefined
+
+ | \[\] | 
+
+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>`.
+
+"col""row"undefined
+
+
+
+ | 
+
+'row'
+
+ | Set object |
+| srOnly | 
+
+Set **`srOnly`** to hide an element visually but still make it accessible to screen readers. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
+
+Hide on all breakpoints: `srOnly: true` Hide on specific breakpoints: `srOnly: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
+
+ResponsiveProp<boolean> | undefined
+
+ | \- | Set object |
+| stretch | 
+
+The **`stretch`** property is used to stretch an element to fill the available space in its parent container. It sets the `height` property to `100%` and `alignSelf` to `stretch`, allowing the element to expand and contract based on the size of its parent.
+
+booleanundefined
+
+
+
+ | \- | Set object |
+| textAlign | 
+
+The **`text-align`** CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"center" | "left" | "right" | "inherit" | "justify"> | undefined
+
+ | \- | Set object |
+| textStyle | 
+
+Select the typography to be used using the **`textStyle`** prop. These are connected to the typography tokens in the design system.'
+
+*   `typography.body.sm` - Use for small components such as badges and disclaimers, as well as compact variations of tables and lists.
+*   `typography.body.md` - The most commonly used body text size, used for most text content in the product and the default state of all components in the design system.
+*   `typography.body.lg` - Use for tag lines, subtitles, and other large text content in the product.
+*   `typography.heading.1` - Use for the main page title to establish a clear hierarchy. There is typically only one H1 per screen, emphasising the primary purpose or context of the page.
+*   `typography.heading.2` - Use for primary section headings within a page to organise content and guide the user through key areas. Also suitable for large components—such as modals—where space allows and where it pairs well with body.md or body.lg.
+*   `typography.heading.3` - Use for sub-sections under H2s to further structure content and maintain a clear visual hierarchy. Ideal for breaking down complex sections into manageable parts.
+*   `typography.heading.4` - Use for supporting headings within content blocks or small components where space is limited—such as table headers, cards, or side panels. Provides structure without overwhelming the layout.
+*   `typography.heading.5` - Use for minor labels or titles in compact UI elements, such as cards, sidebars, or inline labels. Best used to emphasise supplementary information without drawing too much attention. Works well with body.sm and is ideal for subtle content like fine print. Use sparingly to preserve typographic hierarchy.
+*   `typography.code` - Used to display code snippets in the product, such as in the API documentation.
+
+ResponsiveProp<"typography.heading.1" | "typography.heading.2" | "typography.heading.3" | "typography.heading.4" | "typography.heading.5" | "typography.body.sm" | "typography.body.sm.regular" | ... 10 more ... | "typography.code"> | undefined
+
+ | \- | Set object |
+| width | 
+
+The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area.
+
+This prop only allows widths available throughout the component library. To use a custom width, you need to use the `style` prop, or add a custom class to the element and use CSS.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **4** |
+
+ResponsiveProp<"auto" | SizeToken | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | ... 8 more ... | "11/12"> | undefined
+
+ | \- | Set object |
+
 [](#usage)Usage
 ---------------
 
@@ -162,7 +684,7 @@ export const TableCustomColumns \= () \=> (
       {
         key: 'cost',
         label: 'Cost',
-        align: 'right',
+        textAlign: 'right',
         format: renderColumn,
       },
     \]}
@@ -246,7 +768,7 @@ To completely customise it, you can also send in a function that returns a React
 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) | 21 seconds ago | 123,456.78 | 12% | Custom |
+| Hello, world! | 123456 | 28/06/2020 | 28 Jun 2020 | 2020-06-28 00:00:00 (UTC) | 15 seconds ago | $123,456.78 | 12% | Custom |
 
 Hide code
 
@@ -382,7 +904,7 @@ export const TableSorting \= () \=> (
       {
         key: 'cost',
         label: 'Cost',
-        align: 'right',
+        textAlign: 'right',
         sort: true,
         format: renderColumn,
       },
@@ -451,7 +973,7 @@ const columns: TableColumn<Row\>\[\] \= \[
   {
     key: 'cost',
     label: 'Cost (sorts by net cost if available)',
-    align: 'right',
+    textAlign: 'right',
     format: (value: number, row) \=> {
       return (
         <\>
@@ -608,27 +1130,27 @@ Hide code
   \]}
   columns\={\[
     {
-      align: 'left',
       key: 'investment\_name',
-      label: 'Investment (left)'
+      label: 'Investment (left)',
+      textAlign: 'left'
     },
     {
-      align: 'center',
       format: 'currency',
       key: 'cost',
-      label: 'Cost (center)'
+      label: 'Cost (center)',
+      textAlign: 'center'
     },
     {
-      align: 'center',
       format: 'date',
       key: 'investmentDate',
-      label: 'Date (center)'
+      label: 'Date (center)',
+      textAlign: 'center'
     },
     {
-      align: 'right',
       format: 'percent',
       key: 'totalPercentage',
-      label: 'Share (right)'
+      label: 'Share (right)',
+      textAlign: 'right'
     }
   \]}
 />
@@ -788,7 +1310,7 @@ Copy
 
 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.
 
-<table class="ids-table-v5150 ids-table--hidden-header-v5150" id=":ra:"><caption id=":ra:--caption" class="">My investments</caption><tbody><tr id=":ra:--rows--0"><th data-column="investment_name" id=":ra:__0_investment_name" scope="row">Artemis Fund Managers Limited</th><td data-column="cost" headers=":ra:__0_investment_name" id=":ra:__0_cost">23898</td><td data-column="investmentDate" headers=":ra:__0_investment_name" id=":ra:__0_investmentDate">2019-09-23</td><td data-column="totalPercentage" headers=":ra:__0_investment_name" id=":ra:__0_totalPercentage">24.8</td></tr><tr id=":ra:--rows--1"><th data-column="investment_name" id=":ra:__1_investment_name" scope="row">CASH.CASH</th><td data-column="cost" headers=":ra:__1_investment_name" id=":ra:__1_cost">49751.4</td><td data-column="investmentDate" headers=":ra:__1_investment_name" id=":ra:__1_investmentDate">2020-06-28</td><td data-column="totalPercentage" headers=":ra:__1_investment_name" id=":ra:__1_totalPercentage">49</td></tr><tr id=":ra:--rows--2"><th data-column="investment_name" id=":ra:__2_investment_name" scope="row">VODAFONE GRP</th><td data-column="cost" headers=":ra:__2_investment_name" id=":ra:__2_cost">26382.456</td><td data-column="investmentDate" headers=":ra:__2_investment_name" id=":ra:__2_investmentDate">2019-02-05</td><td data-column="totalPercentage" headers=":ra:__2_investment_name" id=":ra:__2_totalPercentage">26.2</td></tr></tbody></table>
+<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=":rr:"><caption id=":rr:--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=":rr:--rows--0" class=""><th data-column="investment_name" id=":rr:__0_investment_name" scope="row">Artemis Fund Managers Limited</th><td data-column="cost" headers=":rr:__0_investment_name" id=":rr:__0_cost">23898</td><td data-column="investmentDate" headers=":rr:__0_investment_name" id=":rr:__0_investmentDate">2019-09-23</td><td data-column="totalPercentage" headers=":rr:__0_investment_name" id=":rr:__0_totalPercentage">24.8</td></tr><tr id=":rr:--rows--1" class=""><th data-column="investment_name" id=":rr:__1_investment_name" scope="row">CASH.CASH</th><td data-column="cost" headers=":rr:__1_investment_name" id=":rr:__1_cost">49751.4</td><td data-column="investmentDate" headers=":rr:__1_investment_name" id=":rr:__1_investmentDate">2020-06-28</td><td data-column="totalPercentage" headers=":rr:__1_investment_name" id=":rr:__1_totalPercentage">49</td></tr><tr id=":rr:--rows--2" class=""><th data-column="investment_name" id=":rr:__2_investment_name" scope="row">VODAFONE GRP</th><td data-column="cost" headers=":rr:__2_investment_name" id=":rr:__2_cost">26382.456</td><td data-column="investmentDate" headers=":rr:__2_investment_name" id=":rr:__2_investmentDate">2019-02-05</td><td data-column="totalPercentage" headers=":rr:__2_investment_name" id=":rr:__2_totalPercentage">26.2</td></tr></tbody></table>
 
 Hide code
 
@@ -896,10 +1418,10 @@ Hide code
       label: 'Share'
     },
     {
-      align: 'right',
       format: 'currency',
       key: 'cost',
-      label: 'Cost'
+      label: 'Cost',
+      textAlign: 'right'
     }
   \]}
   empty\="This table has no data"
@@ -1014,10 +1536,7 @@ Hide code
     }
   \]}
   rowProps\={(row) \=> ({
-      style: {
-        "--iress-row-even-background-color": row.original.cost && row.original.cost \> 30000 ? "white" : "lightblue",
-        "--iress-row-odd-background-color": row.original.cost && row.original.cost \> 30000 ? "white" : "lightblue"
-      }
+      bg: row.original.cost && row.original.cost \> 30000 ? "colour.neutral.10" : "colour.system.success.surface"
     })}
 />
 
@@ -1070,7 +1589,7 @@ Copy
 
 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.
 
-<table class="ids-table-v5150" id=":rr:"><caption id=":rr:--caption" class="">My liabilities</caption><tbody aria-labelledby=":rs:--caption" class=""><tr><th aria-expanded="true" colspan="8" class="ids-table--row-group-header-v5150" id=":rs:--caption" scope="rowgroup" aria-controls=":rs:--header--0 :rs:--rows--0 :rs:--children"><button class="ids-table--activator-v5150" type="button">Current liabilities</button></th></tr><tr class="ids-table--row-group-column-headers-v5150" id=":rs:--header--0"><th id=":rs:__owner" headers=":rs:--caption" class="" style="width: 75px; min-width: 75px;">Owner</th><th id=":rs:__type" headers=":rs:--caption" class="" style="width: 100px; min-width: 100px;">Type</th><th id=":rs:__provider" headers=":rs:--caption" class="">Provider</th><th id=":rs:__status" headers=":rs:--caption" class="ids-table--divider-v5150">Status</th><th id=":rs:__frequency" headers=":rs:--caption" class="">Frequency</th><th id=":rs:__outstanding" headers=":rs:--caption" aria-sort="none" class="ids-table--cell--currency-v5150"><button type="button" class="ids-table--sort-button-v5150 ids-table--sort-button-no-wrap-v5150">Outstanding (GBP)<span role="img" class="ids-table--sort-icon-v5150 ids-icon-v5150 fa-sort fal" aria-label="sortable"></span></button></th><th id=":rs:__interestRate" headers=":rs:--caption" aria-sort="none" class="ids-table--cell--right-v5150"><button type="button" class="ids-table--sort-button-v5150 ids-table--sort-button-no-wrap-v5150">Interest rate p.a.<span role="img" class="ids-table--sort-icon-v5150 ids-icon-v5150 fa-sort fal" aria-label="sortable"></span></button></th><th id=":rs:__repayment" headers=":rs:--caption" aria-sort="none" class="ids-table--cell--currency-v5150"><button type="button" class="ids-table--sort-button-v5150 ids-table--sort-button-no-wrap-v5150">Repayment (GBP)<span role="img" class="ids-table--sort-icon-v5150 ids-icon-v5150 fa-sort fal" aria-label="sortable"></span></button></th></tr><tr id=":rs:--rows--0"><td data-column="owner" headers=":rs:__owner :rs:--caption" id=":rs:__0_owner" class="" style="width: 75px; min-width: 75px;">Client</td><td data-column="type" headers=":rs:__type :rs:--caption" id=":rs:__0_type" class="" style="width: 100px; min-width: 100px;">Credit card</td><td data-column="provider" headers=":rs:__provider :rs:--caption" id=":rs:__0_provider" class=""></td><td data-column="status" headers=":rs:__status :rs:--caption" id=":rs:__0_status" class="ids-table--divider-v5150">Current</td><td data-column="frequency" headers=":rs:__frequency :rs:--caption" id=":rs:__0_frequency" class="">Monthly</td><td data-column="outstanding" headers=":rs:__outstanding :rs:--caption" id=":rs:__0_outstanding" class="ids-table--cell--currency-v5150">5,000.00</td><td data-column="interestRate" headers=":rs:__interestRate :rs:--caption" id=":rs:__0_interestRate" class="ids-table--cell--right-v5150">0%</td><td data-column="repayment" headers=":rs:__repayment :rs:--caption" id=":rs:__0_repayment" class="ids-table--cell--currency-v5150">300.00</td></tr><tr id=":rs:--children"><td colspan="8"><button class="iress-form-element iress-form-element__inner iress-u-button iress--mode--tertiary" type="button"><span class="iress-u-button__prepend"><span role="img" class="ids-icon-v5150 fa-plus-circle fal" aria-hidden="true"></span></span>Add current liability</button></td></tr></tbody><tbody aria-labelledby=":ru:--caption" class=""><tr><th aria-expanded="false" colspan="8" class="ids-table--row-group-header-v5150" id=":ru:--caption" scope="rowgroup"><button class="ids-table--activator-v5150" type="button">Long term liabilities</button></th></tr></tbody><tbody aria-labelledby=":rv:--caption" class=""><tr><th aria-expanded="false" colspan="8" class="ids-table--row-group-header-v5150" id=":rv:--caption" scope="rowgroup"><button class="ids-table--activator-v5150" type="button">Contingent liabilities</button></th></tr></tbody></table>
+<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=":r3:"><caption id=":r3:--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=":r4:--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=":r4:--caption" scope="rowgroup" aria-controls=":r4:--header--0 :r4:--rows--0 :r4:--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=":r4:--header--0"><th id=":r4:__owner" headers=":r4:--caption" class="ta_start" style="width: 75px; min-width: 75px;">Owner</th><th id=":r4:__type" headers=":r4:--caption" class="ta_start" style="width: 100px; min-width: 100px;">Type</th><th id=":r4:__provider" headers=":r4:--caption" class="ta_start">Provider</th><th id=":r4:__status" headers=":r4:--caption" class="ta_start bd-e_table">Status</th><th id=":r4:__frequency" headers=":r4:--caption" class="ta_start">Frequency</th><th id=":r4:__outstanding" headers=":r4:--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=":r4:__interestRate" headers=":r4:--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=":r4:__repayment" headers=":r4:--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=":r4:--rows--0" class=""><td data-column="owner" headers=":r4:__owner :r4:--caption" id=":r4:__0_owner" class="ta_start" style="width: 75px; min-width: 75px;">Client</td><td data-column="type" headers=":r4:__type :r4:--caption" id=":r4:__0_type" class="ta_start" style="width: 100px; min-width: 100px;">Credit card</td><td data-column="provider" headers=":r4:__provider :r4:--caption" id=":r4:__0_provider" class="ta_start"></td><td data-column="status" headers=":r4:__status :r4:--caption" id=":r4:__0_status" class="ta_start bd-e_table">Current</td><td data-column="frequency" headers=":r4:__frequency :r4:--caption" id=":r4:__0_frequency" class="ta_start">Monthly</td><td data-column="outstanding" headers=":r4:__outstanding :r4:--caption" id=":r4:__0_outstanding" class="ta_start [&amp;&amp;]:ta_end">$5,000.00</td><td data-column="interestRate" headers=":r4:__interestRate :r4:--caption" id=":r4:__0_interestRate" class="ta_right">0%</td><td data-column="repayment" headers=":r4:__repayment :r4:--caption" id=":r4:__0_repayment" class="ta_start [&amp;&amp;]:ta_end">$300.00</td></tr><tr id=":r4:--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=":r6:--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=":r6:--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=":r7:--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=":r7:--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>
 
 Hide code
 
@@ -1173,7 +1692,7 @@ const columns: TableColumn<Liability\>\[\] \= \[
     key: 'interestRate',
     label: 'Interest rate p.a.',
     format: 'percent',
-    align: 'right',
+    textAlign: 'right',
     sort: true,
   },
   {
@@ -1193,7 +1712,7 @@ export const TableGroupedRows \= () \=> (
       scope\="col"
       open
     \>
-      <IressButton mode\="tertiary" prepend\={<IressIcon name\="plus-circle" />}\>
+      <IressButton prepend\={<IressIcon name\="plus-circle" />}\>
         Add current liability      </IressButton\>
     </IressTableBody\>
     <IressTableBody
@@ -1202,7 +1721,7 @@ export const TableGroupedRows \= () \=> (
       caption\="Long term liabilities"
       scope\="col"
     \>
-      <IressButton mode\="tertiary" prepend\={<IressIcon name\="plus-circle" />}\>
+      <IressButton prepend\={<IressIcon name\="plus-circle" />}\>
         Add long term liability      </IressButton\>
     </IressTableBody\>
     <IressTableBody
@@ -1211,7 +1730,7 @@ export const TableGroupedRows \= () \=> (
       caption\="Contingent liabilities"
       scope\="col"
     \>
-      <IressButton mode\="tertiary" prepend\={<IressIcon name\="plus-circle" />}\>
+      <IressButton prepend\={<IressIcon name\="plus-circle" />}\>
         Add contingent liability      </IressButton\>
     </IressTableBody\>
   </IressTable\>
@@ -1219,6 +1738,473 @@ export const TableGroupedRows \= () \=> (
 
 Copy
 
+#### [](#table-body-api)Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| bg | 
+**`bg`** sets the background color of an element using the `background-color` css property using the color tokens in the design system.
+
+We recommend using the following token values for best background contrast:
+
+*   `colour.primary.fill` for primary backgrounds that need to stand out
+*   `colour.primary.surface` for primary backgrounds that need to be less prominent
+*   `colour.neutral.10` for the base background color, normally white in light mode or shade of grey in dark mode
+*   `colour.neutral.20` for a slightly darker background color, used in neutral state components
+*   `colour.system.danger.fill` for error backgrounds that need to stand out
+*   `colour.system.danger.surface` for error backgrounds that need to be less prominent
+*   `colour.system.success.fill` for success backgrounds that need to stand out
+*   `colour.system.success.surface` for success backgrounds that need to be less prominent
+*   `colour.system.warning.fill` for warning backgrounds that need to stand out
+*   `colour.system.warning.surface` for warning backgrounds that need to be less prominent
+*   `colour.system.info.fill` for info backgrounds that need to stand out
+*   `colour.system.info.surface` for info backgrounds that need to be less prominent
+
+ResponsiveProp<ColorToken> | undefined
+
+ | \- | Set object |
+| borderRadius | 
+
+The **`border-radius`** CSS property rounds the corners of an element's outer border edge using the radius tokens in the design system.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **4** | **4** | **5** | **12** | **9** |
+| 1 _\-x-_ |  | 3 _\-x-_ |  |  |
+
+ResponsiveProp<RadiusToken> | undefined
+
+ | \- | Set object |
+| 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 |
+| color | 
+
+The **`color`** CSS property sets the foreground color value of an element's text and text decorations using the colour tokens from the design system. It also sets the `currentcolor` value. `currentcolor` may be used as an indirect value on _other_ properties and is the default for other color properties, such as `border-color`.
+
+We recommend using the following token values for best color contrast:
+
+*   `colour.primary.onFill` used on top of `colour.primary.fill` for primary text that needs to stand out
+*   `colour.primary.text` used on top of `colour.primary.surface` or `colour.neutral.10` for primary text that needs to be less prominent
+*   `colour.neutral.70` used on top of `colour.neutral.10` or `colour.neutral.20` for muted text
+*   `colour.neutral.80` used on top of `colour.neutral.10` or `colour.neutral.20` for standard text
+*   `colour.system.danger.onFill` used on top of `colour.system.danger.fill` for error text that needs to stand out
+*   `colour.system.danger.text` used on top of `colour.system.danger.surface` for error text that needs to be less prominent
+*   `colour.system.success.onFill` used on top of `colour.system.success.fill` for success text that needs to stand out
+*   `colour.system.success.text` used on top of `colour.system.success.surface` for success text that needs to be less prominent
+*   `colour.system.warning.onFill` used on top of `colour.system.warning.fill` for warning text that needs to stand out
+*   `colour.system.warning.text` used on top of `colour.system.warning.surface` for warning text that needs to be less prominent
+*   `colour.system.info.onFill` used on top of `colour.system.info.fill` for informative text that needs to stand out
+*   `colour.system.info.text` used on top of `colour.system.info.surface` for informative text that needs to be less prominent
+
+ResponsiveProp<ColorToken> | undefined
+
+ | \- | Set object |
+| 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>\[\] | undefined
+
+ | \- | Set object |
+| empty | 
+
+Content to be show when there is no rowData (columns must also be provided).
+
+ReactNode
+
+
+
+ | \- | Set object |
+| focusable | 
+
+The `focusable` prop is used to apply the focus elevation when focused. It can be set to `true` to apply focus styles on focus, or `'within'` to apply focus styles when the element or any of its children are focused.
+
+"true""within"undefined
+
+
+
+ | \- | Set object |
+| hiddenCaption | 
+
+When set to true, the table caption will be visually hidden. If set, the inner table will always be open.
+
+booleanundefined
+
+
+
+ | \- | Set object |
+| hiddenHeader | 
+
+When set to true, the table header (`<thead></thead>`) will be not be rendered. Only use with very simple tables.
+
+booleanundefined
+
+
+
+ | \- | Set object |
+| hide | 
+
+Set **`hide`** to hide an element completely using `display: none`. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
+
+Hide on all breakpoints: `hide: true` Hide on specific breakpoints: `hide: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
+
+Notes:
+
+*   If you need to hide an element but allow it to be visible to screen readers, use the `srOnly` prop instead.
+*   Consider if you can conditionally render the element instead of hiding it.
+
+ResponsiveProp<boolean> | undefined
+
+ | \- | Set object |
+| layerStyle | 
+
+Elevate a layer by using a **`layerStyle`**. These are connected to the elevation tokens in the design system. They can be combined to create hierarchy and structure.
+
+*   `elevation.raised`: Raised elevations sit slightly higher than other content. They are reserved for cards that can be moved, such as Jira issue cards and Trello cards. In special circumstances, they can be used for cards as a way to provide additional heirarchy or emphasis.
+*   `elevation.floating`: Floating is the highest elevation available. It is reserved for a UI that sits over another UI, such as modals, dialogs, dropdown menus, floating toolbars, and floating single-action buttons.
+*   `elevation.overflow`: Overflow is a shadow indicating content has scrolled outside a view. It can be used for vertical or horizontal scroll. An example of overflow shadows is the horizontal scroll in tables on a Confluence page.
+
+ResponsiveProp<"elevation.raised" | "elevation.floating" | "elevation.overflow" | "elevation.focus" | "elevation.focusCompact"> | undefined
+
+ | \- | Set object |
+| m | 
+
+The **`m`** property is short for `margin`, and sets the margin area on all four sides of an element.
+
+It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<SpacingToken | "auto"> | undefined
+
+ | \- | Set object |
+| maxWidth | 
+
+The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **7** |
+
+ResponsiveProp<"auto" | SizeToken | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | ... 8 more ... | "11/12"> | undefined
+
+ | \- | Set object |
+| mb | 
+
+The **`mb`** property is short for `margin-bottom` and sets the margin area on the bottom side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+
+It uses the spacing tokens in the design system.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<SpacingToken | "auto"> | undefined
+
+ | \- | Set object |
+| ml | 
+
+The **`ml`** property is short for `margin-left` and sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+
+It uses the spacing tokens in the design system.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<SpacingToken | "auto"> | undefined
+
+ | \- | Set object |
+| mr | 
+
+The **`mr`** property is short for `margin-right` and sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+
+It uses the spacing tokens in the design system.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<SpacingToken | "auto"> | undefined
+
+ | \- | Set object |
+| mt | 
+
+The **`mt`** property is short for `margin-top` and sets the margin area on the top side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+
+It uses the spacing tokens in the design system.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<SpacingToken | "auto"> | undefined
+
+ | \- | Set object |
+| mx | 
+
+The **`mx`** property is short for `margin-inline`. It is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
+
+It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<SpacingToken | "auto"> | undefined
+
+ | \- | Set object |
+| my | 
+
+The **`my`** property is short for `margin-block`. It defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
+
+It uses the spacing tokens in the design system. You can also use the negative values to overlap elements or ignore padding based on the design requirements.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<SpacingToken | "auto"> | undefined
+
+ | \- | Set object |
+| noGutter | 
+
+The **`noGutter`** property is used to remove the bottom margin from the last child of a component. This is useful when you want to avoid extra spacing at the end of a layout.
+
+booleanundefined
+
+
+
+ | \- | Set object |
+| onClosed | 
+
+Is called when table is closed.
+
+(() => void) | undefined
+
+ | \- | \- |
+| onOpened | 
+
+Is called when table is opened.
+
+(() => void) | undefined
+
+ | \- | \- |
+| open | 
+
+When true, all rows will be visible, otherwise they are hidden.
+
+booleanundefined
+
+
+
+ | 
+
+false
+
+ | Set object |
+| p | 
+
+The **`p`** property is short for `padding`, and sets the padding area on all four sides of an element at once.
+
+It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| pb | 
+
+The **`pb`** property is short for `padding-bottom` and sets the padding area on the bottom side of an element.
+
+It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| pl | 
+
+The **`pl`** property is short for `padding-left` and sets the padding area on the left side of an element.
+
+It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| pr | 
+
+The **`pr`** property is short for `padding-right` and sets the padding area on the right side of an element.
+
+It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| pt | 
+
+The **`pt`** property is short for `padding-top` and sets the padding area on the top side of an element.
+
+It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| px | 
+
+The **`px`** property is short for `padding-inline`. It is a shorthand property that defines both the logical inline start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
+
+It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| py | 
+
+The **`py`** property is short for `padding-block`. It defines the logical block start and end paddings of an element, which maps to physical paddings depending on the element's writing mode, directionality, and text orientation.
+
+It uses the spacing tokens in the design system. Padding cannot use negative values, if you need to overlap elements or ignore padding, use the margin property instead.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| rowGap | 
+
+The **`row-gap`** CSS property sets the size of the gap (gutter) between an element's rows.
+
+Note: It only has an effect when used as a direct child of a layout component, such as IressRow, IressStack or IressInline.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **47** | **52** | **10.1** | **16** | No |
+
+ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "none" | "spacing.000" | "spacing.050" | "spacing.100" | "spacing.150" | "spacing.200" | "spacing.250" | "spacing.300" | "spacing.350" | ... 9 more ... | "slider.tick"> | undefined
+
+ | \- | Set object |
+| 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.
+
+IressStyledProps<"tr"> | ((row: Row<TRow>) => IressStyledProps<"tr">) | undefined
+
+ | \- | Set object |
+| rows | 
+
+Each object in the array contains the data for a row.
+
+TRow\[\] | undefined
+
+ | \[\] | Set object |
+| scope | 
+
+Defaults to 'row' - the first cell in the row is a `<th>`, otherwise it's a `<td>`.
+
+"col""row"undefined
+
+
+
+ | 
+
+'row'
+
+ | Set object |
+| srOnly | 
+
+Set **`srOnly`** to hide an element visually but still make it accessible to screen readers. It can also be set to an object of breakpoints to hide the element at specific breakpoints.
+
+Hide on all breakpoints: `srOnly: true` Hide on specific breakpoints: `srOnly: { xs: false, sm: true, md: false, lg: true, xl: false, xxl: true }`
+
+ResponsiveProp<boolean> | undefined
+
+ | \- | Set object |
+| stretch | 
+
+The **`stretch`** property is used to stretch an element to fill the available space in its parent container. It sets the `height` property to `100%` and `alignSelf` to `stretch`, allowing the element to expand and contract based on the size of its parent.
+
+booleanundefined
+
+
+
+ | \- | Set object |
+| textAlign | 
+
+The **`text-align`** CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **3** |
+
+ResponsiveProp<"center" | "left" | "right" | "inherit" | "justify"> | undefined
+
+ | \- | Set object |
+| textStyle | 
+
+Select the typography to be used using the **`textStyle`** prop. These are connected to the typography tokens in the design system.'
+
+*   `typography.body.sm` - Use for small components such as badges and disclaimers, as well as compact variations of tables and lists.
+*   `typography.body.md` - The most commonly used body text size, used for most text content in the product and the default state of all components in the design system.
+*   `typography.body.lg` - Use for tag lines, subtitles, and other large text content in the product.
+*   `typography.heading.1` - Use for the main page title to establish a clear hierarchy. There is typically only one H1 per screen, emphasising the primary purpose or context of the page.
+*   `typography.heading.2` - Use for primary section headings within a page to organise content and guide the user through key areas. Also suitable for large components—such as modals—where space allows and where it pairs well with body.md or body.lg.
+*   `typography.heading.3` - Use for sub-sections under H2s to further structure content and maintain a clear visual hierarchy. Ideal for breaking down complex sections into manageable parts.
+*   `typography.heading.4` - Use for supporting headings within content blocks or small components where space is limited—such as table headers, cards, or side panels. Provides structure without overwhelming the layout.
+*   `typography.heading.5` - Use for minor labels or titles in compact UI elements, such as cards, sidebars, or inline labels. Best used to emphasise supplementary information without drawing too much attention. Works well with body.sm and is ideal for subtle content like fine print. Use sparingly to preserve typographic hierarchy.
+*   `typography.code` - Used to display code snippets in the product, such as in the API documentation.
+
+ResponsiveProp<"typography.heading.1" | "typography.heading.2" | "typography.heading.3" | "typography.heading.4" | "typography.heading.5" | "typography.body.sm" | "typography.body.sm.regular" | ... 10 more ... | "typography.code"> | undefined
+
+ | \- | Set object |
+| width | 
+
+The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area.
+
+This prop only allows widths available throughout the component library. To use a custom width, you need to use the `style` prop, or add a custom class to the element and use CSS.
+
+| Chrome | Firefox | Safari | Edge | IE |
+| --- | --- | --- | --- | --- |
+| **1** | **1** | **1** | **12** | **4** |
+
+ResponsiveProp<"auto" | SizeToken | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | ... 8 more ... | "11/12"> | undefined
+
+ | \- | Set object |
+
 [](#iresstableformattedvalue)`IressTableFormattedValue`
 -------------------------------------------------------
 
@@ -1231,9 +2217,9 @@ IressTableFormattedValue
 | --- | --- |
 | string | string |
 | number | 10000 |
-| date | 27/06/2025 |
-| shortDate | 27 Jun 2025 |
-| isoDateTime | 2025-06-27 04:09:53 (UTC) |
+| date | 14/08/2025 |
+| shortDate | 14 Aug 2025 |
+| isoDateTime | 2025-08-14 02:54:29 (UTC) |
 | relativeTime | now |
 | currency | $10,000.00 |
 | percent | 50% |
@@ -1278,6 +2264,42 @@ Hide code
 
 Copy
 
+#### [](#table-formatted-value-api)Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| currencyFormatOptions | 
+The currency code to prefix to the value if `format` is set to currency.
+
+Omit<CurrencyFormatterProps, "value"> | undefined
+
+ | { locale: 'en-AU', currencyCode: 'AUD' } | \- |
+| format | 
+
+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.
+
+"string" | "number" | "percent" | "date" | "currency" | "shortDate" | "isoDateTime" | "relativeTime" | ((value: TVal, row?: TRow | undefined) => ReactNode) | undefined
+
+ | \- | \- |
+| row | 
+
+The row data.
+
+objectundefined
+
+
+
+ | \- | \- |
+| value\* | 
+
+The value to format.
+
+TVal
+
+
+
+ | \- | \- |
+
 On this page
 
 *   [Overview](#overview)