@ukic/canary-web-components 3.0.0-canary.21 → 3.0.0-canary.23

package/dist/collection/components/ic-data-table/ic-data-table.stories.js

@@ -67,7 +67,7 @@ export const ColumnHeaderTruncation = {
 };
 /**
  * Row headers allow headings to be added to individual rows and styles them as column headings. The column collection includes an additional `header` key which aligns with the row headers. The structure of the `header` column is the same as the columns (i.e. key, title, dataType).
- * The data array includes an additional `header` key which takes an object. The title of the row header is set by passing `title` as the key and a value.
+ * The data array includes an additional `header` key within the `rowOptions` which takes a string intended to be the title of the row header.
  */
 export const RowHeadersExample = {
     render: () => RowHeaders(),
@@ -137,9 +137,10 @@ export const ColumnOverridesExample = {
     name: "Column overrides",
 };
 /**
- * Row overrides allow styling to be applied at a row level and is set within the `header` object. The row overrides are used in conjunction with row headers. The following row overrides options apply:
+ * Row overrides allow styling to be applied at a row level and is set within the `rowOptions` object. The following row overrides options apply:
  * - `rowAlignment` accepts `left`, `right` and `center`.
  * - `emphasis` accepts `high` or `low`.
+ * - `textWrap` accepts `true` or `false`.
  */
 export const RowOverridesExample = {
     render: () => RowOverrides(),
@@ -371,9 +372,9 @@ export const TableSizingAndColumnWidth = {
     name: "Table sizing and column width",
 };
 /**
- * The cell data can contain an `actionElement` which can be a string containing any html to be rendered. The `actionElement` will be displayed to the right of the cell data. An `actionOnClick` can be specified for the `actionElement`. This should be used with a keyboard accessible component such as `icButton` for a function to be run when the `actionElement` is clicked.
+ * The cells can contain a slotted `actionElement`. The `actionElement` will be displayed to the right of the cell data.
  */
-export const ActionElementAndOnClickAction = {
+export const ActionElements = {
     render: () => ActionElement(),
     name: "Action element",
 };

package/dist/collection/components/ic-data-table/ic-data-table.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-data-table.stories.js","sourceRoot":"","sources":["../../../src/components/ic-data-table/ic-data-table.stories.js"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport readme from \"./readme.md\";\nimport {\n  ActionElement,\n  Basic,\n  CellDescriptions,\n  CellOverrides,\n  ColumnOverrides,\n  CustomIcons,\n  CustomRowHeights,\n  CustomTitleBar,\n  DataTableSizing,\n  Dense,\n  DevArea,\n  DisableAutoSortColumns,\n  DisableSort,\n  Embedded,\n  Empty,\n  EmptySlotted,\n  ExcludeColumnsFromSort,\n  HeaderTruncation,\n  HiddenCol,\n  LargeDataSet,\n  LinksHTMLElements,\n  Loading,\n  LongCellDescriptions,\n  MissingCellData,\n  Pagination,\n  RowHeaders,\n  RowOverrides,\n  Scrollable,\n  SlottedElementsWithPagination,\n  SlottedPagination,\n  Sort,\n  SortOptions,\n  Spacious,\n  TruncationShowHide,\n  TruncationTextWrap,\n  TruncationTooltip,\n  Updating,\n  UpdatingData,\n  SelectWithCheckbox,\n} from \"./story-data\";\n\nexport default {\n  title: \"Web Components/Data Table\",\n  component: \"ic-data-table\",\n  parameters: {\n    componentAPI: {\n      data: readme,\n    },\n  },\n};\n\n/**\n * Use the data table component to display data in a tabular form.\n *\n * There are two required props for data table:\n * - Caption: `string`\n * - Columns: `IcDataTableColumnObject[]`\n *\n * Click the 'Component API' tab to view all the available props, events and slots for data tables.\n *\n * To use the data table component, import `@ukic/canary-web-components` into your application.\n */\nexport const Default = {\n  render: () => Basic(),\n  name: \"Basic\",\n};\n\nexport const LargeDataSetExample = {\n  render: () => LargeDataSet(),\n  name: \"Large data set\",\n};\n\n/**\n * The `embedded` boolean adds a border around the table so it can be added as a standalone table and is not required to stretch the full width of its parent container.\n */\nexport const EmbeddedExample = {\n  render: () => Embedded(),\n  name: \"Embedded\",\n};\n\n/**\n * The `density` variant provides three different styles for the data table:\n * - `dense` reduces the padding and font size of the table cells to give the data a more dense style.\n * - `default` provides a padding of `8px` which is the default spacing. This variant is seen in the [first](#basic) example.\n * - `spacious` gives the data table a more spacious look and feel by increasing the vertical padding as well as the font size.\n */\nexport const DenseExample = {\n  render: () => Dense(),\n  name: \"Dense\",\n};\n\nexport const SpaciousExample = {\n  render: () => Spacious(),\n  name: \"Spacious\",\n};\n\n/**\n * When a height for the data table is set, the scroll bar will appear to the right. However, by default, the column headers will move up and out of view making it difficult to understand what the data means.\n * This can be mitigated by using the `sticky-column-headers` prop which takes a boolean. This can be toggled within the example below.\n */\nexport const StickyColumnHeaders = {\n  render: () => Scrollable(),\n  name: \"Sticky column headers\",\n};\n\n/**\n * By default, column header labels will wrap when they exceed the column width. To keep the column header height constant, the `columnHeaderTruncation` can be used. When set to `true`, the label will appear truncated and will display a tooltip with the full text when hovered over.\n */\nexport const ColumnHeaderTruncation = {\n  render: () => HeaderTruncation(),\n  name: \"Column header truncation\",\n};\n\n/**\n * Row headers allow headings to be added to individual rows and styles them as column headings. The column collection includes an additional `header` key which aligns with the row headers. The structure of the `header` column is the same as the columns (i.e. key, title, dataType).\n * The data array includes an additional `header` key which takes an object. The title of the row header is set by passing `title` as the key and a value.\n */\nexport const RowHeadersExample = {\n  render: () => RowHeaders(),\n  name: \"Row headers\",\n};\n\n/**\n * Set `sortable` to `true` to set the sort functionality on all columns. Sorting can be set to `unsorted`, `ascending` and `descending` by press the sort buttons next to the column heading.\n */\nexport const Sortable = {\n  render: () => Sort(),\n  name: \"Sortable\",\n};\n\n/**\n * It is possible to change the sort options for the sort buttons. The `sortOptions` prop takes an object with `sortOrders` and `defaultColumn`. `sortOrders` allows the sort order to be amended as we all as remove a sort type. Such as changing the order to `descending`, `unsorted` and remove `ascending`. `defaultColumn` sets which column is ordered by default. This is set by padding the column key as the `defaultColumn` value.\n */\nexport const SortOptionsExample = {\n  render: () => SortOptions(),\n  name: \"Sort options\",\n};\n\n/**\n * Set `sortable` to `true` and set `disable-auto-sort` to `true` to enable external sorting functionality.\n */\nexport const DisableSortExample = {\n  render: () => DisableSort(),\n  name: \"Disable sort\",\n};\n\n/**\n * Alternatively, set `disable-auto-sort` to `true` within the column object to have it apply only to certain columns that may require special custom sorting.\n */\nexport const DisableAutoSortOnColumns = {\n  render: () => DisableAutoSortColumns(),\n  name: \"Disable sort on columns\",\n};\n\n/**\n * Adding 'excludeColumnFromSort: true` to the column object excludes that column from displaying the sort button.\n */\nexport const ExcludeColumnsFromSortExample = {\n  render: () => ExcludeColumnsFromSort(),\n  name: \"Exclude columns from sort\",\n};\n\n/**\n * Adding 'hidden: true` to the column object hides that column. In this example, the Age column is hidden.\n */\nexport const HideColumnExample = {\n  render: () => HiddenCol(),\n  name: \"Column visibility\",\n};\n\n/**\n * Pagination allows large data sets to be split into pages in order to make the data easier to digest. Setting `show-pagination` to `true` will add the `ic-pagination` component to the bottom of the table. There a several sub components within pagination which are set via the `paginationBarOptions` prop:\n * - `itemsPerPage` allows customization on the number of items on each page. This requires a collection with `label` and `value` key pairs.\n * - `showItemsPerPageControl` shows or hides the `itemsPerPage` component using `true` or `false`.\n * - `showGoToPageControl` displays controls which allows jumping between pages in a non-linear approach.\n */\nexport const PaginationExample = {\n  render: () => Pagination(),\n  name: \"Pagination\",\n};\n\n/**\n * There may be a requirement to style a column differently to the rest of the data to add emphasis. For example, centre align data within the 'first name' column. To do this, add `columnAlignment` to the column. `columnAlignment` takes an object which sets the `horizontal` and `vertical` property:\n * - `horizontal` accepts `left`, `right` or `center`.\n * - `vertical` accepts `top`, `middle`, `bottom`.\n *\n * `emphasis` can be added to the column by setting `high` or `low`.\n */\nexport const ColumnOverridesExample = {\n  render: () => ColumnOverrides(),\n  name: \"Column overrides\",\n};\n\n/**\n * Row overrides allow styling to be applied at a row level and is set within the `header` object. The row overrides are used in conjunction with row headers. The following row overrides options apply:\n * - `rowAlignment` accepts `left`, `right` and `center`.\n * - `emphasis` accepts `high` or `low`.\n */\nexport const RowOverridesExample = {\n  render: () => RowOverrides(),\n  name: \"Row overrides\",\n};\n\n/**\n * Cell overrides allows styling to be applied at a cell level. The cell which requires an override accepts an object which requires `data` and can contain `cellAlignment` and/or `emphasis`:\n * - `data` is the cell value.\n * - `emphasis` accepts `high` or `low`.\n * - `cellAlignment` accepts an object with the following key pairs:\n *  - `horizontal` accepts `left`, `right` or `center`.\n *  - `vertical` accepts `top`, `middle`, `bottom`.\n */\nexport const CellOverridesExample = {\n  render: () => CellOverrides(),\n  name: \"Cell overrides\",\n};\n\n/**\n * When the table receives no data (either `null` or an empty array) it will automatically show an `ic-empty-state` below the headers.\n */\nexport const DefaultEmptyState = {\n  render: () => Empty(),\n  name: \"Empty state\",\n};\n\n/**\n * You can customise your own `ic-empty-state` component and slot it into the data table using the `empty-state` slot, to reflect different scenarios.\n */\nexport const SlottedEmptyState = {\n  render: () => EmptySlotted(),\n  name: \"Slotted empty state\",\n};\n\n/**\n * When a user wants to fetch their data asynchronously, a `loading` prop can be set to `true`, which then renders a circular variant of the `ic-loading-indicator`.\n * The loading indicator can be customised using the `loadingOptions` prop:\n * - `description` sets the aria-label of the component\n * - `label` sets the visual message\n * - `labelDuration` is the number of milliseconds before the label changes\n * - `overlay` renders a dark overlay over the previous data set while new data is loaded\n *\n * If it needs to be determinate, use `max`, `min` and `progress`.\n */\nexport const LoadingState = {\n  render: () => Loading(),\n  name: \"Loading state\",\n  height: \"720px\",\n};\n\n/**\n * If data in the table has changed, an `updating` prop has been supplied to show a linear `ic-loading-indicator` just above the data rows.\n *\n * This prop is also accompanied by an `updatingOptions` prop, which contains similar options to `loadingOptions`, minus `label` and `labelDuration` since the linear version is displayed.\n */\nexport const UpdatingState = {\n  render: () => Updating(),\n  name: \"Updating state\",\n};\n\n/**\n * Custom HTML elements can be slotted or passed via the `data` prop to display in certain cells. When using the slotted method, the slot name follows the format of `{COLUMN_TAG}-{ROW_INDEX}`.\n */\nexport const LinksAndElementsInData = {\n  render: () => LinksHTMLElements(),\n  name: \"Links and elements in data\",\n};\n\nexport const SlottedElementsWithPaginationExample = {\n  render: () => SlottedElementsWithPagination(),\n  name: \"Slotted elements with pagination\",\n};\n\n/**\n * Custom icons can be added to cells, columns and headers in the data table. To add it to headers, set the icon via the `columns` prop:\n * ```\n * icon: {\n *  icon: //ICON_STRING_GOES_HERE,\n *  onAllCells: //Boolean to determine whether column header icon should be replicated on all cells in the column,\n *  hideOnHeader: //Boolean for whether this icon should only be shown on cells and not on the header,\n * }\n * ```\n *\n * To add icons to individual cells, they can be added through the `data` prop, in a similar method to overriding the cell. Cell icons take priority over the `onAllCells` prop, meaning specific cells can be made to stand out.\n *\n * Both cells and headers can also have icons slotted in. Cells use the slot format: `{COLUMN_KEY}-{ROW_INDEX}-icon`, and headers use the format: `{COLUMN_KEY}-column-icon`. Slotted icons take priority over icons inserted via the `columns` and `data` props.\n */\nexport const CustomIconsExample = {\n  render: () => CustomIcons(),\n  name: \"Custom icons\",\n};\n\n/**\n * A data table can have its rows use custom heights, to help display more data per row. This involves using the `globalRowHeight` prop, which applies this custom height to all rows.\n *\n * For a more granular approach, `variableRowHeight` exists. This is passed through the data object for each row of data, as well as that row's `index`. Using these properties, you can write a custom function that will return a number for that row's height based on your criteria.\n * Returning `null` from this function means that the row will use the `globalRowHeight` property value.\n *\n * **_NOTE:_** If the data table uses the `density` prop, then your custom value will be scaled depending on the density, in order to keep content readable as the text size changes:\n * - `Dense` = 80% of `globalRowHeight` or `variableRowHeight`\n * - `Spacious` = 120% of `globalRowHeight` or `variableRowHeight`\n *\n * E.G: If `globalRowHeight` = 100, a dense table will set the height to be **_80_**.\n *\n * **_NOTE:_** If a cell has a description (see \"Description and icons within cells\"), then the row height for that individual row will be increased by the description height in order to fully display it.\n *\n * E.G: If `globalRowHeight` = 100 and a cell has a description with a height of 20, then the row height for that cell's row will be set to **_120_**.\n *\n * To quickly reset all row heights to the default, you can run the `resetRowHeights` method.\n *\n * If you'd rather let the row calculate its own height based on its content, either set `globalRowHeight` to `auto`, or return `auto` from `variableRowHeight`.\n */\nexport const CustomRowHeightsExample = {\n  render: () => CustomRowHeights(),\n  name: \"Custom row heights\",\n};\n\n/**\n * To add additional information about the data held in your data table, you can use the `title-bar` slot to add an `ic-data-table-title-bar`, which will appear above the column headers.\n *\n * The title bar can have a description and metadata added, to provide supporting information to display some context about the data to the user. Primary and custom action slots also exist to allow for actions to be performed that are related to the data, which can be prominently displayed.\n *\n * The `ic-data-table-title-bar` has a built-in density selector, which allows a user to quickly change the size and padding of cells to make it more readable. This can also be hidden if preferred.\n *\n * More details on `ic-data-table-title-bar` can be found in the <ic-link href=\"/?path=/story/web-components-data-table-title-bar--basic\" inline=\"\">data table title bar documentation</ic-link>.\n */\nexport const CustomTitleBarExample = {\n  render: () => CustomTitleBar(),\n  name: \"Custom title bar\",\n};\n\n/**\n * The example below demonstrates how the pagination bar responds to changes within the data.\n *\n * More details on `ic-pagination-bar` can be found in the <ic-link href=\"/?path=/story/web-components-pagination-bar--docs\" inline=\"\">pagination bar documentation</ic-link>.\n */\nexport const UpdatingDataExample = {\n  render: () => UpdatingData(),\n  name: \"Updating data\",\n};\n\n/**\n * There may be scenarios when using `ic-data-table` when pagination and data fetching is done using a backend API.\n *\n * To enable this behaviour, the `pagination-bar` slot can be utilised to provide a custom `ic-pagination-bar` component, allowing the user to have more control over how their data is displayed & interacted with.\n */\nexport const SlottedPaginationBar = {\n  render: () => SlottedPagination(),\n  name: \"Slotted pagination bar\",\n};\n\n/**\n * When a row is given a set height, and has content that no longer fits into the cell area, the content becomes truncated. There are two types of truncation:\n * - `tooltip`: Adds a line-clamp to the cell and displays the message in a tooltip.\n * - `show-hide`: Adds a `See more/See less` button underneath the cell text, allowing the user to display the full content should they wish.\n *\n * These values are set using the `truncation-pattern` attribute.\n *\n * By default, `global-row-height` is set to `auto`. If the `truncation-pattern` attribute is set to `tooltip` or `show-hide` while `global-row-height` is `auto`, the data will not appear truncated due to the row height being set to the data which has the most height.\n *\n * To see the data truncated, the `global-row-height` or `variable-row-height` needs to be explicitly set to a height which is shorter than data which has the most lines.\n *\n * **_NOTE:_** `truncation-pattern` only applies to a cell's main data value. If a cell has a description (see \"Description and icons within cells\") then this will not be truncated and will still be visible beyond the truncation.\n */\nexport const DataTruncationTooltip = {\n  render: () => TruncationTooltip(),\n  name: \"Data truncation tooltip\",\n};\n\nexport const TruncationShowHideExample = {\n  render: () => TruncationShowHide(),\n  name: \"Data truncation see more / see less\",\n};\n\n/**\n * Text can be set to wrap in a particular column, row or cell. Any column, row or cell that text wrap is applied to will ignore the custom height if the custom height is too small and the full content will be shown.\n *\n * To set text to wrap in a column, add `textWrap: true` as a key value:\n * ```\n * const column = [\n *  { key: \"name\", title: \"Name\", dataType: \"string\" },\n *  ...\n * ]\n * ```\n *\n * To set text to wrap in a row, add `rowOptions: { textWrap: true }` to an object within the data array:\n * ```\n * const data = [\n *  {\n *    name: \"Tim Rayes\",\n *    age: 41,\n *    department: \"Sales and Marketing\",\n *    employeeNumber: 3,\n *    jobTitle:\n *      \"Regional Sales and Marketing Strategy Director (Europe, the Middle East, and Africa)\",\n *    rowOptions: {\n *      textWrap: true\n *    }\n *  },\n *  ...\n * ]\n * ```\n *\n * To set text wrap in a cell, add `textWrap` to a data key within an object:\n * ```\n * const data = [\n *  {\n *    name: {\n *      data:\"Tim Rayes\",\n *      textWrap: true\n *    },\n *    age: 41,\n *    department: \"Sales and Marketing\",\n *    employeeNumber: 3,\n *    jobTitle:\n *      \"Regional Sales and Marketing Strategy Director (Europe, the Middle East, and Africa)\",\n *  },\n *  ...\n * ]\n * ```\n */\nexport const TextWrap = {\n  render: () => TruncationTextWrap(),\n  name: \"Text wrap\",\n};\n\n/**\n * The dimensions of the data table can be set using the `width` and `height` attributes. The attribute accepts dimensions in `px`, `%`, `rem` and `auto`.\n *\n * By default, the width is set to `100%` so the table spans across the viewport or parent container.\n *\n * To set the column widths, the `columnWidth` property should be added to the relevant column within the column array.\n *\n * The [table layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) attribute is vital to how the table resizing and column widths behave. By default, the table layout is set to `fixed`. If no column width is set, the columns widths will be equally set within the viewport or parent container.\n *\n * A table with a `fixed` layout will force the table column widths to take precedence over the data with the table cells.\n *\n * For the column widths to be dictated by the content inside, set the `table-layout` attribute to `auto` and set the table `width` to `auto`.\n *\n * To set the min and max width of a table cell, set the `table-layout` attribute to `auto` and set a `minWidth` or `maxWidth` value into `columnWidth`. The min and max width accepts dimensions in `px`, `%`, `rem`.\n */\nexport const TableSizingAndColumnWidth = {\n  render: () => DataTableSizing(),\n  name: \"Table sizing and column width\",\n};\n\n/**\n * The cell data can contain an `actionElement` which can be a string containing any html to be rendered. The `actionElement` will be displayed to the right of the cell data. An `actionOnClick` can be specified for the `actionElement`. This should be used with a keyboard accessible component such as `icButton` for a function to be run when the `actionElement` is clicked.\n */\nexport const ActionElementAndOnClickAction = {\n  render: () => ActionElement(),\n  name: \"Action element\",\n};\n\n/**\n * Descriptions and icons can be included in the cells by proving a `description` field in the data. This will populate the cell with an icon (if provided) and a text string underneath the cell data. This can be applied to any cell.\n *\n * You can provide a `description` object with or without an icon:\n * ```\n * // With an icon\n * firstName: {\n *  data: \"Joe\",\n *  description: {\n *    data: \"The name of Joe\",\n *    icon: '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"0 -960 960 960\" width=\"20\"><path d=\"M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm56-97h489L578-473 446-302l-93-127-117 152Zm-56 97v-600 600Z\"/></svg>',\n *  },\n * }\n * ```\n *\n * ```\n * // Without an icon\n * firstName: {\n *  data: \"Joe\",\n *  description: \"The name of Joe\"\n * }\n * ```\n */\nexport const CellDescriptionsAndIcons = {\n  render: () => CellDescriptions(),\n  name: \"Description and icons within cells\",\n};\n\nexport const CellDescriptionsLongText = {\n  render: () => LongCellDescriptions(),\n  name: \"Description and icons within cells with long text\",\n};\n\n/**\n * The example below demonstrates the table being able to handle empty cell values (null, undefined or empty string).\n */\nexport const MissingCellDataExample = {\n  render: () => MissingCellData(),\n  name: \"Missing cell data\",\n};\n\n/**\n * By setting `row-selection` to `true`, `ic-checkbox` elements will appear in the leftmost column, with one in the header.\n * When checked, the corresponding row will be selected, with the `icSelectedRowChange` containing the selected row and an array of all the currently selected rows.\n *\n * When checking the header checkbox, all rows will be selected, with the `icSelectAllRows` event being emitted with an array of all the rows. When using pagination, only the rows on the current page will be selected.\n */\nexport const SelectRowsUsingCheckboxExample = {\n  render: () => SelectWithCheckbox(),\n  name: \"Select rows with checkbox\",\n};\n\nexport const DevAreaExample = {\n  render: () => DevArea(),\n  name: \"Dev area\",\n};\n"]}
+{"version":3,"file":"ic-data-table.stories.js","sourceRoot":"","sources":["../../../src/components/ic-data-table/ic-data-table.stories.js"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EACL,aAAa,EACb,KAAK,EACL,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,KAAK,EACL,OAAO,EACP,sBAAsB,EACtB,WAAW,EACX,QAAQ,EACR,KAAK,EACL,YAAY,EACZ,sBAAsB,EACtB,gBAAgB,EAChB,SAAS,EACT,YAAY,EACZ,iBAAiB,EACjB,OAAO,EACP,oBAAoB,EACpB,eAAe,EACf,UAAU,EACV,UAAU,EACV,YAAY,EACZ,UAAU,EACV,6BAA6B,EAC7B,iBAAiB,EACjB,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,QAAQ,EACR,YAAY,EACZ,kBAAkB,GACnB,MAAM,cAAc,CAAC;AAEtB,eAAe;IACb,KAAK,EAAE,2BAA2B;IAClC,SAAS,EAAE,eAAe;IAC1B,UAAU,EAAE;QACV,YAAY,EAAE;YACZ,IAAI,EAAE,MAAM;SACb;KACF;CACF,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE;IACrB,IAAI,EAAE,OAAO;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,MAAM,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE;IAC5B,IAAI,EAAE,gBAAgB;CACvB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE;IACxB,IAAI,EAAE,UAAU;CACjB,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE;IACrB,IAAI,EAAE,OAAO;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE;IACxB,IAAI,EAAE,UAAU;CACjB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,MAAM,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE;IAC1B,IAAI,EAAE,uBAAuB;CAC9B,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB,EAAE;IAChC,IAAI,EAAE,0BAA0B;CACjC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE;IAC1B,IAAI,EAAE,aAAa;CACpB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE;IACpB,IAAI,EAAE,UAAU;CACjB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,MAAM,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE;IAC3B,IAAI,EAAE,cAAc;CACrB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,MAAM,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE;IAC3B,IAAI,EAAE,cAAc;CACrB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,MAAM,EAAE,GAAG,EAAE,CAAC,sBAAsB,EAAE;IACtC,IAAI,EAAE,yBAAyB;CAChC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG;IAC3C,MAAM,EAAE,GAAG,EAAE,CAAC,sBAAsB,EAAE;IACtC,IAAI,EAAE,2BAA2B;CAClC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE;IACzB,IAAI,EAAE,mBAAmB;CAC1B,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE;IAC1B,IAAI,EAAE,YAAY;CACnB,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,MAAM,EAAE,GAAG,EAAE,CAAC,eAAe,EAAE;IAC/B,IAAI,EAAE,kBAAkB;CACzB,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,MAAM,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE;IAC5B,IAAI,EAAE,eAAe;CACtB,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,MAAM,EAAE,GAAG,EAAE,CAAC,aAAa,EAAE;IAC7B,IAAI,EAAE,gBAAgB;CACvB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE;IACrB,IAAI,EAAE,aAAa;CACpB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE;IAC5B,IAAI,EAAE,qBAAqB;CAC5B,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE;IACvB,IAAI,EAAE,eAAe;IACrB,MAAM,EAAE,OAAO;CAChB,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE;IACxB,IAAI,EAAE,gBAAgB;CACvB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,MAAM,EAAE,GAAG,EAAE,CAAC,iBAAiB,EAAE;IACjC,IAAI,EAAE,4BAA4B;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,oCAAoC,GAAG;IAClD,MAAM,EAAE,GAAG,EAAE,CAAC,6BAA6B,EAAE;IAC7C,IAAI,EAAE,kCAAkC;CACzC,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,MAAM,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE;IAC3B,IAAI,EAAE,cAAc;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB,EAAE;IAChC,IAAI,EAAE,oBAAoB;CAC3B,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,MAAM,EAAE,GAAG,EAAE,CAAC,cAAc,EAAE;IAC9B,IAAI,EAAE,kBAAkB;CACzB,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,MAAM,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE;IAC5B,IAAI,EAAE,eAAe;CACtB,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,MAAM,EAAE,GAAG,EAAE,CAAC,iBAAiB,EAAE;IACjC,IAAI,EAAE,wBAAwB;CAC/B,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,MAAM,EAAE,GAAG,EAAE,CAAC,iBAAiB,EAAE;IACjC,IAAI,EAAE,yBAAyB;CAChC,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,MAAM,EAAE,GAAG,EAAE,CAAC,kBAAkB,EAAE;IAClC,IAAI,EAAE,qCAAqC;CAC5C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,MAAM,EAAE,GAAG,EAAE,CAAC,kBAAkB,EAAE;IAClC,IAAI,EAAE,WAAW;CAClB,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,MAAM,EAAE,GAAG,EAAE,CAAC,eAAe,EAAE;IAC/B,IAAI,EAAE,+BAA+B;CACtC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,GAAG,EAAE,CAAC,aAAa,EAAE;IAC7B,IAAI,EAAE,gBAAgB;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB,EAAE;IAChC,IAAI,EAAE,oCAAoC;CAC3C,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,MAAM,EAAE,GAAG,EAAE,CAAC,oBAAoB,EAAE;IACpC,IAAI,EAAE,mDAAmD;CAC1D,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,MAAM,EAAE,GAAG,EAAE,CAAC,eAAe,EAAE;IAC/B,IAAI,EAAE,mBAAmB;CAC1B,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG;IAC5C,MAAM,EAAE,GAAG,EAAE,CAAC,kBAAkB,EAAE;IAClC,IAAI,EAAE,2BAA2B;CAClC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE;IACvB,IAAI,EAAE,UAAU;CACjB,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport readme from \"./readme.md\";\nimport {\n  ActionElement,\n  Basic,\n  CellDescriptions,\n  CellOverrides,\n  ColumnOverrides,\n  CustomIcons,\n  CustomRowHeights,\n  CustomTitleBar,\n  DataTableSizing,\n  Dense,\n  DevArea,\n  DisableAutoSortColumns,\n  DisableSort,\n  Embedded,\n  Empty,\n  EmptySlotted,\n  ExcludeColumnsFromSort,\n  HeaderTruncation,\n  HiddenCol,\n  LargeDataSet,\n  LinksHTMLElements,\n  Loading,\n  LongCellDescriptions,\n  MissingCellData,\n  Pagination,\n  RowHeaders,\n  RowOverrides,\n  Scrollable,\n  SlottedElementsWithPagination,\n  SlottedPagination,\n  Sort,\n  SortOptions,\n  Spacious,\n  TruncationShowHide,\n  TruncationTextWrap,\n  TruncationTooltip,\n  Updating,\n  UpdatingData,\n  SelectWithCheckbox,\n} from \"./story-data\";\n\nexport default {\n  title: \"Web Components/Data Table\",\n  component: \"ic-data-table\",\n  parameters: {\n    componentAPI: {\n      data: readme,\n    },\n  },\n};\n\n/**\n * Use the data table component to display data in a tabular form.\n *\n * There are two required props for data table:\n * - Caption: `string`\n * - Columns: `IcDataTableColumnObject[]`\n *\n * Click the 'Component API' tab to view all the available props, events and slots for data tables.\n *\n * To use the data table component, import `@ukic/canary-web-components` into your application.\n */\nexport const Default = {\n  render: () => Basic(),\n  name: \"Basic\",\n};\n\nexport const LargeDataSetExample = {\n  render: () => LargeDataSet(),\n  name: \"Large data set\",\n};\n\n/**\n * The `embedded` boolean adds a border around the table so it can be added as a standalone table and is not required to stretch the full width of its parent container.\n */\nexport const EmbeddedExample = {\n  render: () => Embedded(),\n  name: \"Embedded\",\n};\n\n/**\n * The `density` variant provides three different styles for the data table:\n * - `dense` reduces the padding and font size of the table cells to give the data a more dense style.\n * - `default` provides a padding of `8px` which is the default spacing. This variant is seen in the [first](#basic) example.\n * - `spacious` gives the data table a more spacious look and feel by increasing the vertical padding as well as the font size.\n */\nexport const DenseExample = {\n  render: () => Dense(),\n  name: \"Dense\",\n};\n\nexport const SpaciousExample = {\n  render: () => Spacious(),\n  name: \"Spacious\",\n};\n\n/**\n * When a height for the data table is set, the scroll bar will appear to the right. However, by default, the column headers will move up and out of view making it difficult to understand what the data means.\n * This can be mitigated by using the `sticky-column-headers` prop which takes a boolean. This can be toggled within the example below.\n */\nexport const StickyColumnHeaders = {\n  render: () => Scrollable(),\n  name: \"Sticky column headers\",\n};\n\n/**\n * By default, column header labels will wrap when they exceed the column width. To keep the column header height constant, the `columnHeaderTruncation` can be used. When set to `true`, the label will appear truncated and will display a tooltip with the full text when hovered over.\n */\nexport const ColumnHeaderTruncation = {\n  render: () => HeaderTruncation(),\n  name: \"Column header truncation\",\n};\n\n/**\n * Row headers allow headings to be added to individual rows and styles them as column headings. The column collection includes an additional `header` key which aligns with the row headers. The structure of the `header` column is the same as the columns (i.e. key, title, dataType).\n * The data array includes an additional `header` key within the `rowOptions` which takes a string intended to be the title of the row header.\n */\nexport const RowHeadersExample = {\n  render: () => RowHeaders(),\n  name: \"Row headers\",\n};\n\n/**\n * Set `sortable` to `true` to set the sort functionality on all columns. Sorting can be set to `unsorted`, `ascending` and `descending` by press the sort buttons next to the column heading.\n */\nexport const Sortable = {\n  render: () => Sort(),\n  name: \"Sortable\",\n};\n\n/**\n * It is possible to change the sort options for the sort buttons. The `sortOptions` prop takes an object with `sortOrders` and `defaultColumn`. `sortOrders` allows the sort order to be amended as we all as remove a sort type. Such as changing the order to `descending`, `unsorted` and remove `ascending`. `defaultColumn` sets which column is ordered by default. This is set by padding the column key as the `defaultColumn` value.\n */\nexport const SortOptionsExample = {\n  render: () => SortOptions(),\n  name: \"Sort options\",\n};\n\n/**\n * Set `sortable` to `true` and set `disable-auto-sort` to `true` to enable external sorting functionality.\n */\nexport const DisableSortExample = {\n  render: () => DisableSort(),\n  name: \"Disable sort\",\n};\n\n/**\n * Alternatively, set `disable-auto-sort` to `true` within the column object to have it apply only to certain columns that may require special custom sorting.\n */\nexport const DisableAutoSortOnColumns = {\n  render: () => DisableAutoSortColumns(),\n  name: \"Disable sort on columns\",\n};\n\n/**\n * Adding 'excludeColumnFromSort: true` to the column object excludes that column from displaying the sort button.\n */\nexport const ExcludeColumnsFromSortExample = {\n  render: () => ExcludeColumnsFromSort(),\n  name: \"Exclude columns from sort\",\n};\n\n/**\n * Adding 'hidden: true` to the column object hides that column. In this example, the Age column is hidden.\n */\nexport const HideColumnExample = {\n  render: () => HiddenCol(),\n  name: \"Column visibility\",\n};\n\n/**\n * Pagination allows large data sets to be split into pages in order to make the data easier to digest. Setting `show-pagination` to `true` will add the `ic-pagination` component to the bottom of the table. There a several sub components within pagination which are set via the `paginationBarOptions` prop:\n * - `itemsPerPage` allows customization on the number of items on each page. This requires a collection with `label` and `value` key pairs.\n * - `showItemsPerPageControl` shows or hides the `itemsPerPage` component using `true` or `false`.\n * - `showGoToPageControl` displays controls which allows jumping between pages in a non-linear approach.\n */\nexport const PaginationExample = {\n  render: () => Pagination(),\n  name: \"Pagination\",\n};\n\n/**\n * There may be a requirement to style a column differently to the rest of the data to add emphasis. For example, centre align data within the 'first name' column. To do this, add `columnAlignment` to the column. `columnAlignment` takes an object which sets the `horizontal` and `vertical` property:\n * - `horizontal` accepts `left`, `right` or `center`.\n * - `vertical` accepts `top`, `middle`, `bottom`.\n *\n * `emphasis` can be added to the column by setting `high` or `low`.\n */\nexport const ColumnOverridesExample = {\n  render: () => ColumnOverrides(),\n  name: \"Column overrides\",\n};\n\n/**\n * Row overrides allow styling to be applied at a row level and is set within the `rowOptions` object. The following row overrides options apply:\n * - `rowAlignment` accepts `left`, `right` and `center`.\n * - `emphasis` accepts `high` or `low`.\n * - `textWrap` accepts `true` or `false`.\n */\nexport const RowOverridesExample = {\n  render: () => RowOverrides(),\n  name: \"Row overrides\",\n};\n\n/**\n * Cell overrides allows styling to be applied at a cell level. The cell which requires an override accepts an object which requires `data` and can contain `cellAlignment` and/or `emphasis`:\n * - `data` is the cell value.\n * - `emphasis` accepts `high` or `low`.\n * - `cellAlignment` accepts an object with the following key pairs:\n *  - `horizontal` accepts `left`, `right` or `center`.\n *  - `vertical` accepts `top`, `middle`, `bottom`.\n */\nexport const CellOverridesExample = {\n  render: () => CellOverrides(),\n  name: \"Cell overrides\",\n};\n\n/**\n * When the table receives no data (either `null` or an empty array) it will automatically show an `ic-empty-state` below the headers.\n */\nexport const DefaultEmptyState = {\n  render: () => Empty(),\n  name: \"Empty state\",\n};\n\n/**\n * You can customise your own `ic-empty-state` component and slot it into the data table using the `empty-state` slot, to reflect different scenarios.\n */\nexport const SlottedEmptyState = {\n  render: () => EmptySlotted(),\n  name: \"Slotted empty state\",\n};\n\n/**\n * When a user wants to fetch their data asynchronously, a `loading` prop can be set to `true`, which then renders a circular variant of the `ic-loading-indicator`.\n * The loading indicator can be customised using the `loadingOptions` prop:\n * - `description` sets the aria-label of the component\n * - `label` sets the visual message\n * - `labelDuration` is the number of milliseconds before the label changes\n * - `overlay` renders a dark overlay over the previous data set while new data is loaded\n *\n * If it needs to be determinate, use `max`, `min` and `progress`.\n */\nexport const LoadingState = {\n  render: () => Loading(),\n  name: \"Loading state\",\n  height: \"720px\",\n};\n\n/**\n * If data in the table has changed, an `updating` prop has been supplied to show a linear `ic-loading-indicator` just above the data rows.\n *\n * This prop is also accompanied by an `updatingOptions` prop, which contains similar options to `loadingOptions`, minus `label` and `labelDuration` since the linear version is displayed.\n */\nexport const UpdatingState = {\n  render: () => Updating(),\n  name: \"Updating state\",\n};\n\n/**\n * Custom HTML elements can be slotted or passed via the `data` prop to display in certain cells. When using the slotted method, the slot name follows the format of `{COLUMN_TAG}-{ROW_INDEX}`.\n */\nexport const LinksAndElementsInData = {\n  render: () => LinksHTMLElements(),\n  name: \"Links and elements in data\",\n};\n\nexport const SlottedElementsWithPaginationExample = {\n  render: () => SlottedElementsWithPagination(),\n  name: \"Slotted elements with pagination\",\n};\n\n/**\n * Custom icons can be added to cells, columns and headers in the data table. To add it to headers, set the icon via the `columns` prop:\n * ```\n * icon: {\n *  icon: //ICON_STRING_GOES_HERE,\n *  onAllCells: //Boolean to determine whether column header icon should be replicated on all cells in the column,\n *  hideOnHeader: //Boolean for whether this icon should only be shown on cells and not on the header,\n * }\n * ```\n *\n * To add icons to individual cells, they can be added through the `data` prop, in a similar method to overriding the cell. Cell icons take priority over the `onAllCells` prop, meaning specific cells can be made to stand out.\n *\n * Both cells and headers can also have icons slotted in. Cells use the slot format: `{COLUMN_KEY}-{ROW_INDEX}-icon`, and headers use the format: `{COLUMN_KEY}-column-icon`. Slotted icons take priority over icons inserted via the `columns` and `data` props.\n */\nexport const CustomIconsExample = {\n  render: () => CustomIcons(),\n  name: \"Custom icons\",\n};\n\n/**\n * A data table can have its rows use custom heights, to help display more data per row. This involves using the `globalRowHeight` prop, which applies this custom height to all rows.\n *\n * For a more granular approach, `variableRowHeight` exists. This is passed through the data object for each row of data, as well as that row's `index`. Using these properties, you can write a custom function that will return a number for that row's height based on your criteria.\n * Returning `null` from this function means that the row will use the `globalRowHeight` property value.\n *\n * **_NOTE:_** If the data table uses the `density` prop, then your custom value will be scaled depending on the density, in order to keep content readable as the text size changes:\n * - `Dense` = 80% of `globalRowHeight` or `variableRowHeight`\n * - `Spacious` = 120% of `globalRowHeight` or `variableRowHeight`\n *\n * E.G: If `globalRowHeight` = 100, a dense table will set the height to be **_80_**.\n *\n * **_NOTE:_** If a cell has a description (see \"Description and icons within cells\"), then the row height for that individual row will be increased by the description height in order to fully display it.\n *\n * E.G: If `globalRowHeight` = 100 and a cell has a description with a height of 20, then the row height for that cell's row will be set to **_120_**.\n *\n * To quickly reset all row heights to the default, you can run the `resetRowHeights` method.\n *\n * If you'd rather let the row calculate its own height based on its content, either set `globalRowHeight` to `auto`, or return `auto` from `variableRowHeight`.\n */\nexport const CustomRowHeightsExample = {\n  render: () => CustomRowHeights(),\n  name: \"Custom row heights\",\n};\n\n/**\n * To add additional information about the data held in your data table, you can use the `title-bar` slot to add an `ic-data-table-title-bar`, which will appear above the column headers.\n *\n * The title bar can have a description and metadata added, to provide supporting information to display some context about the data to the user. Primary and custom action slots also exist to allow for actions to be performed that are related to the data, which can be prominently displayed.\n *\n * The `ic-data-table-title-bar` has a built-in density selector, which allows a user to quickly change the size and padding of cells to make it more readable. This can also be hidden if preferred.\n *\n * More details on `ic-data-table-title-bar` can be found in the <ic-link href=\"/?path=/story/web-components-data-table-title-bar--basic\" inline=\"\">data table title bar documentation</ic-link>.\n */\nexport const CustomTitleBarExample = {\n  render: () => CustomTitleBar(),\n  name: \"Custom title bar\",\n};\n\n/**\n * The example below demonstrates how the pagination bar responds to changes within the data.\n *\n * More details on `ic-pagination-bar` can be found in the <ic-link href=\"/?path=/story/web-components-pagination-bar--docs\" inline=\"\">pagination bar documentation</ic-link>.\n */\nexport const UpdatingDataExample = {\n  render: () => UpdatingData(),\n  name: \"Updating data\",\n};\n\n/**\n * There may be scenarios when using `ic-data-table` when pagination and data fetching is done using a backend API.\n *\n * To enable this behaviour, the `pagination-bar` slot can be utilised to provide a custom `ic-pagination-bar` component, allowing the user to have more control over how their data is displayed & interacted with.\n */\nexport const SlottedPaginationBar = {\n  render: () => SlottedPagination(),\n  name: \"Slotted pagination bar\",\n};\n\n/**\n * When a row is given a set height, and has content that no longer fits into the cell area, the content becomes truncated. There are two types of truncation:\n * - `tooltip`: Adds a line-clamp to the cell and displays the message in a tooltip.\n * - `show-hide`: Adds a `See more/See less` button underneath the cell text, allowing the user to display the full content should they wish.\n *\n * These values are set using the `truncation-pattern` attribute.\n *\n * By default, `global-row-height` is set to `auto`. If the `truncation-pattern` attribute is set to `tooltip` or `show-hide` while `global-row-height` is `auto`, the data will not appear truncated due to the row height being set to the data which has the most height.\n *\n * To see the data truncated, the `global-row-height` or `variable-row-height` needs to be explicitly set to a height which is shorter than data which has the most lines.\n *\n * **_NOTE:_** `truncation-pattern` only applies to a cell's main data value. If a cell has a description (see \"Description and icons within cells\") then this will not be truncated and will still be visible beyond the truncation.\n */\nexport const DataTruncationTooltip = {\n  render: () => TruncationTooltip(),\n  name: \"Data truncation tooltip\",\n};\n\nexport const TruncationShowHideExample = {\n  render: () => TruncationShowHide(),\n  name: \"Data truncation see more / see less\",\n};\n\n/**\n * Text can be set to wrap in a particular column, row or cell. Any column, row or cell that text wrap is applied to will ignore the custom height if the custom height is too small and the full content will be shown.\n *\n * To set text to wrap in a column, add `textWrap: true` as a key value:\n * ```\n * const column = [\n *  { key: \"name\", title: \"Name\", dataType: \"string\" },\n *  ...\n * ]\n * ```\n *\n * To set text to wrap in a row, add `rowOptions: { textWrap: true }` to an object within the data array:\n * ```\n * const data = [\n *  {\n *    name: \"Tim Rayes\",\n *    age: 41,\n *    department: \"Sales and Marketing\",\n *    employeeNumber: 3,\n *    jobTitle:\n *      \"Regional Sales and Marketing Strategy Director (Europe, the Middle East, and Africa)\",\n *    rowOptions: {\n *      textWrap: true\n *    }\n *  },\n *  ...\n * ]\n * ```\n *\n * To set text wrap in a cell, add `textWrap` to a data key within an object:\n * ```\n * const data = [\n *  {\n *    name: {\n *      data:\"Tim Rayes\",\n *      textWrap: true\n *    },\n *    age: 41,\n *    department: \"Sales and Marketing\",\n *    employeeNumber: 3,\n *    jobTitle:\n *      \"Regional Sales and Marketing Strategy Director (Europe, the Middle East, and Africa)\",\n *  },\n *  ...\n * ]\n * ```\n */\nexport const TextWrap = {\n  render: () => TruncationTextWrap(),\n  name: \"Text wrap\",\n};\n\n/**\n * The dimensions of the data table can be set using the `width` and `height` attributes. The attribute accepts dimensions in `px`, `%`, `rem` and `auto`.\n *\n * By default, the width is set to `100%` so the table spans across the viewport or parent container.\n *\n * To set the column widths, the `columnWidth` property should be added to the relevant column within the column array.\n *\n * The [table layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) attribute is vital to how the table resizing and column widths behave. By default, the table layout is set to `fixed`. If no column width is set, the columns widths will be equally set within the viewport or parent container.\n *\n * A table with a `fixed` layout will force the table column widths to take precedence over the data with the table cells.\n *\n * For the column widths to be dictated by the content inside, set the `table-layout` attribute to `auto` and set the table `width` to `auto`.\n *\n * To set the min and max width of a table cell, set the `table-layout` attribute to `auto` and set a `minWidth` or `maxWidth` value into `columnWidth`. The min and max width accepts dimensions in `px`, `%`, `rem`.\n */\nexport const TableSizingAndColumnWidth = {\n  render: () => DataTableSizing(),\n  name: \"Table sizing and column width\",\n};\n\n/**\n * The cells can contain a slotted `actionElement`. The `actionElement` will be displayed to the right of the cell data.\n */\nexport const ActionElements = {\n  render: () => ActionElement(),\n  name: \"Action element\",\n};\n\n/**\n * Descriptions and icons can be included in the cells by proving a `description` field in the data. This will populate the cell with an icon (if provided) and a text string underneath the cell data. This can be applied to any cell.\n *\n * You can provide a `description` object with or without an icon:\n * ```\n * // With an icon\n * firstName: {\n *  data: \"Joe\",\n *  description: {\n *    data: \"The name of Joe\",\n *    icon: '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"0 -960 960 960\" width=\"20\"><path d=\"M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm56-97h489L578-473 446-302l-93-127-117 152Zm-56 97v-600 600Z\"/></svg>',\n *  },\n * }\n * ```\n *\n * ```\n * // Without an icon\n * firstName: {\n *  data: \"Joe\",\n *  description: \"The name of Joe\"\n * }\n * ```\n */\nexport const CellDescriptionsAndIcons = {\n  render: () => CellDescriptions(),\n  name: \"Description and icons within cells\",\n};\n\nexport const CellDescriptionsLongText = {\n  render: () => LongCellDescriptions(),\n  name: \"Description and icons within cells with long text\",\n};\n\n/**\n * The example below demonstrates the table being able to handle empty cell values (null, undefined or empty string).\n */\nexport const MissingCellDataExample = {\n  render: () => MissingCellData(),\n  name: \"Missing cell data\",\n};\n\n/**\n * By setting `row-selection` to `true`, `ic-checkbox` elements will appear in the leftmost column, with one in the header.\n * When checked, the corresponding row will be selected, with the `icSelectedRowChange` containing the selected row and an array of all the currently selected rows.\n *\n * When checking the header checkbox, all rows will be selected, with the `icSelectAllRows` event being emitted with an array of all the rows. When using pagination, only the rows on the current page will be selected.\n */\nexport const SelectRowsUsingCheckboxExample = {\n  render: () => SelectWithCheckbox(),\n  name: \"Select rows with checkbox\",\n};\n\nexport const DevAreaExample = {\n  render: () => DevArea(),\n  name: \"Dev area\",\n};\n"]}

package/dist/collection/components/ic-data-table/ic-data-table.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-data-table.types.js","sourceRoot":"","sources":["../../../src/components/ic-data-table/ic-data-table.types.tsx"],"names":[],"mappings":"","sourcesContent":["export type IcDataTableSortOrderOptions =\n  | \"unsorted\"\n  | \"ascending\"\n  | \"descending\";\n\nexport type IcDataTableDensityOptions = \"default\" | \"dense\" | \"spacious\";\n\nexport type IcDataTableColumnDataTypes =\n  | \"string\"\n  | \"number\"\n  | \"address\"\n  | \"element\"\n  | \"date\";\n\nexport type IcDataTableColumnWidthTypes = {\n  width?: string;\n  minWidth?: string;\n  maxWidth?: string;\n};\n\nexport type IcDataTableColumnObject = {\n  key: string;\n  title: string;\n  dataType: IcDataTableColumnDataTypes;\n  columnAlignment?: {\n    horizontal?: string;\n    vertical?: string;\n  };\n  rowOptions?: {\n    textWrap: boolean;\n  };\n  columnWidth?: string | IcDataTableColumnWidthTypes;\n  textWrap?: boolean;\n  cellAlignment?: string;\n  emphasis?: string;\n  colspan?: number;\n  icon?: {\n    icon: string;\n    onAllCells?: boolean;\n    hideOnHeader?: boolean;\n  };\n  excludeColumnFromSort?: boolean;\n  hidden?: boolean;\n  disableAutoSort?: boolean;\n};\n\nexport type IcLoadingOptions = {\n  monochrome?: boolean;\n  description?: string;\n  label?: string;\n  labelDuration?: number;\n  max?: number;\n  min?: number;\n  progress?: number;\n  overlay?: boolean;\n};\n\nexport type IcDataTableRowHeights = number | \"auto\";\n\nexport interface IcDensityUpdateEventDetail {\n  value: IcDataTableDensityOptions;\n}\nexport type IcDataTableTruncationTypes = \"tooltip\" | \"show-hide\" | undefined;\n\nexport interface IcSortEventDetail {\n  columnName: string;\n  sorted: IcDataTableSortOrderOptions;\n}\n\nexport type truncWrapperDetailsTypes = {\n  scrollHeight: number | null;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type IcDataTableDataType = { [key: string]: any };\n"]}
+{"version":3,"file":"ic-data-table.types.js","sourceRoot":"","sources":["../../../src/components/ic-data-table/ic-data-table.types.tsx"],"names":[],"mappings":"","sourcesContent":["export type IcDataTableSortOrderOptions =\n  | \"unsorted\"\n  | \"ascending\"\n  | \"descending\";\n\nexport type IcDataTableDensityOptions = \"default\" | \"dense\" | \"spacious\";\n\nexport type IcDataTableColumnDataTypes =\n  | \"string\"\n  | \"number\"\n  | \"address\"\n  | \"element\"\n  | \"date\";\n\nexport type IcDataTableColumnWidthTypes = {\n  width?: string;\n  minWidth?: string;\n  maxWidth?: string;\n};\n\nexport type IcDataTableAlignmentOptions = {\n  horizontal?: string;\n  vertical?: string;\n};\n\nexport type IcDataTableColumnObject = {\n  key: string;\n  title: string;\n  dataType: IcDataTableColumnDataTypes;\n  columnAlignment?: IcDataTableAlignmentOptions;\n  columnWidth?: string | IcDataTableColumnWidthTypes;\n  textWrap?: boolean;\n  cellAlignment?: string;\n  emphasis?: string;\n  colspan?: number;\n  icon?: {\n    icon: string;\n    onAllCells?: boolean;\n    hideOnHeader?: boolean;\n  };\n  excludeColumnFromSort?: boolean;\n  hidden?: boolean;\n  disableAutoSort?: boolean;\n};\n\nexport type IcLoadingOptions = {\n  monochrome?: boolean;\n  description?: string;\n  label?: string;\n  labelDuration?: number;\n  max?: number;\n  min?: number;\n  progress?: number;\n  overlay?: boolean;\n};\n\nexport type IcDataTableRowHeights = number | \"auto\";\n\nexport interface IcDensityUpdateEventDetail {\n  value: IcDataTableDensityOptions;\n}\nexport type IcDataTableTruncationTypes = \"tooltip\" | \"show-hide\" | undefined;\n\nexport interface IcSortEventDetail {\n  columnName: string;\n  sorted: IcDataTableSortOrderOptions;\n}\n\nexport type truncWrapperDetailsTypes = {\n  scrollHeight: number | null;\n};\n\nexport type IcDataTableRowOptions = {\n  header?: string;\n  emphasis?: string;\n  rowAlignment?: IcDataTableAlignmentOptions;\n  textWrap?: boolean;\n};\n\nexport type IcDataTableDataType = {\n  [key: string]: any;\n  rowOptions?: IcDataTableRowOptions;\n};\n"]}

package/dist/collection/components/ic-data-table/story-data.js

@@ -15,9 +15,9 @@ const ROW_HEADER_TITLES = [
 const imageIconSVG = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm56-97h489L578-473 446-302l-93-127-117 152Zm-56 97v-600 600Z"/></svg>';
 const userIconSVG = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-481q-66 0-108-42t-42-108q0-66 42-108t108-42q66 0 108 42t42 108q0 66-42 108t-108 42ZM160-160v-94q0-38 19-65t49-41q67-30 128.5-45T480-420q62 0 123 15.5t127.921 44.694q31.301 14.126 50.19 40.966Q800-292 800-254v94H160Zm60-60h520v-34q0-16-9.5-30.5T707-306q-64-31-117-42.5T480-360q-57 0-111 11.5T252-306q-14 7-23 21.5t-9 30.5v34Zm260-321q39 0 64.5-25.5T570-631q0-39-25.5-64.5T480-721q-39 0-64.5 25.5T390-631q0 39 25.5 64.5T480-541Zm0-90Zm0 411Z"/></svg>';
 const alertIconSVG = '<svg aria-label="alert-icon" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24" fill="#000000"><path d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z"/></svg>';
-const copyButton = '<ic-button data-testid="copy-button" variant="icon-tertiary" size="small"  aria-label="you can disable tooltips on icon buttons"> <svg aria-label="copy-button" xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" fill="#000000"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg> </ic-button>';
-const cellphoneButton = '<ic-button data-testid="cellphone-button" variant="icon-tertiary" size="small"  aria-label="you can disable tooltips on icon buttons"> <svg aria-label="cellphone-button" xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" fill="#000000"><path d="M17,19H7V5H17M17,1H7C5.89,1 5,1.89 5,3V21A2,2 0 0,0 7,23H17A2,2 0 0,0 19,21V3C19,1.89 18.1,1 17,1Z"/></svg> </ic-button>';
-const downloadButton = '<ic-button data-testid="download-button" variant="icon-tertiary" size="small"  aria-label="you can disable tooltips on icon buttons"> <svg aria-label="download-button" xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" fill="#000000"><path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"/></svg> </ic-button>';
+const copyIconSVG = '<svg aria-label="copy-button" xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" fill="#000000"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg>';
+const cellphoneIconSVG = '<svg aria-label="cellphone-button" xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" fill="#000000"><path d="M17,19H7V5H17M17,1H7C5.89,1 5,1.89 5,3V21A2,2 0 0,0 7,23H17A2,2 0 0,0 19,21V3C19,1.89 18.1,1 17,1Z"/></svg>';
+const downloadIconSVG = '<svg aria-label="download-button" xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" fill="#000000"><path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"/></svg>';
 // TODO: Add columnOptions
 export const COLS = [
     {
@@ -521,60 +521,10 @@ export const DATA_EMPHASIS = [
         address: "5 New Street, Town, Country, Postcode",
     },
 ];
-export const ROW_ALIGNMENT = [
-    {
-        header: {
-            title: ROW_HEADER_TITLES[0],
-            rowAlignment: "middle",
-            emphasis: "high",
-        },
-        firstName: "Joe",
-        lastName: "Bloggs",
-        age: 30,
-        jobTitle: "Developer",
-        address: "1 Main Street, Town, County, Postcode",
-    },
-    {
-        header: {
-            title: ROW_HEADER_TITLES[1],
-        },
-        firstName: "Sarah",
-        lastName: "Smith",
-        age: 28,
-        jobTitle: "Senior Software Developer, Site Reliability Engineering",
-        address: "2 Main Street, Town, Country, Postcode",
-    },
-    {
-        header: {
-            title: ROW_HEADER_TITLES[2],
-        },
-        firstName: "Mark",
-        lastName: "Owens",
-        age: 45,
-        jobTitle: "Team Lead",
-        address: "12 Key Street, Town, Country, Postcode",
-    },
-    {
-        header: {
-            title: ROW_HEADER_TITLES[3],
-        },
-        firstName: "Naomi",
-        lastName: "Thomas",
-        age: 32,
-        jobTitle: "Analyst",
-        address: "8 Side Street, Town, Country, Postcode",
-    },
-    {
-        header: {
-            title: ROW_HEADER_TITLES[4],
-        },
-        firstName: "Luke",
-        lastName: "Ashford",
-        age: 18,
-        jobTitle: "Junior Developer",
-        address: "5 New Street, Town, Country, Postcode",
-    },
-];
+export const ROW_ALIGNMENT = DATA.map((row, index) => (Object.assign(Object.assign({}, row), { rowOptions: Object.assign({ header: ROW_HEADER_TITLES[index] }, (index === 0 && {
+        rowAlignment: { vertical: "middle" },
+        emphasis: "high",
+    })) })));
 export const LONG_COLS = [
     {
         key: "employeeNumber",
@@ -895,9 +845,9 @@ export const ROW_HEADER_COLS = [
         dataType: "address",
     },
 ];
-export const ROW_HEADER_DATA = DATA.map((data, index) => {
-    return Object.assign({ header: { title: ROW_HEADER_TITLES[index] } }, data);
-});
+export const ROW_HEADER_DATA = DATA.map((data, index) => (Object.assign(Object.assign({}, data), { rowOptions: {
+        header: ROW_HEADER_TITLES[index],
+    } })));
 export const COLS_ELEMENTS = [
     {
         key: "actions",
@@ -1203,71 +1153,6 @@ export const DATA_REACT_ELEMENTS_WITH_ICONS = [
         address: "5 New Street, Town, Country, Postcode",
     },
 ];
-export const ACTION_DATA_ELEMENTS = [
-    {
-        firstName: {
-            data: "Joe",
-            actionElement: `${downloadButton}${cellphoneButton}${copyButton}`,
-            actionOnClick: (event) => {
-                event === null || event === void 0 ? void 0 : event.stopPropagation();
-                console.log("hello");
-            },
-        },
-        lastName: "Bloggs",
-        age: 31,
-        jobTitle: "Developer",
-        address: "1 Main Street, Town, County, Postcode",
-    },
-    {
-        firstName: {
-            data: "Sarah",
-            actionElement: copyButton,
-        },
-        lastName: "Jane",
-        age: 28,
-        jobTitle: {
-            data: "Senior Software Developer, Site Reliability Engineering",
-            actionElement: `<ic-status-tag role="status" label="Success" status="success"></ic-status-tag>`,
-        },
-        address: "2 Main Street, Town, Country, Postcode",
-    },
-    {
-        firstName: {
-            data: "Mark",
-            actionElement: copyButton,
-        },
-        lastName: "Smith",
-        age: {
-            data: 45,
-            actionElement: `<ic-button variant="icon-tertiary" id="small-button" size="small" aria-label="you can disable tooltips on icon buttons"> <svg aria-label="refresh button" xmlns="http://www.w3.org/2000/svg"    width="24"    height="24"    viewBox="0 0 24 24"    fill="#000000"  >    <path d="M0 0h24v24H0V0z" fill="none"></path>    <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"></path>  </svg></ic-button>`,
-        },
-        jobTitle: "Team Lead",
-        address: "12 Key Street, Town, Country, Postcode",
-    },
-    {
-        firstName: {
-            data: "Naomi",
-            actionElement: copyButton,
-        },
-        lastName: "Kens",
-        age: 32,
-        jobTitle: "Analyst",
-        address: "8 Side Street, Town, Country, Postcode",
-    },
-    {
-        firstName: {
-            data: "Luke",
-            actionElement: copyButton,
-        },
-        lastName: "Sky",
-        age: 18,
-        jobTitle: "Junior Developer",
-        address: {
-            data: "5 New Street, Town, Country, Postcode",
-            actionElement: `<ic-status-tag role="status" label="Error" status="danger"></ic-status-tag>`,
-        },
-    },
-];
 export const DATA_WITH_EMPTY_VALUES = [
     {
         firstName: "Nigel",
@@ -1299,7 +1184,6 @@ export const LONG_DATA_ELEMENTS_WITH_DESCRIPTIONS = [
                 data: "Alias: JB",
                 icon: imageIconSVG,
             },
-            actionElement: copyButton,
             icon: userIconSVG,
         },
         lastName: "Bloggs",
@@ -1310,7 +1194,6 @@ export const LONG_DATA_ELEMENTS_WITH_DESCRIPTIONS = [
     {
         firstName: {
             data: "Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe",
-            actionElement: copyButton,
         },
         lastName: "Bloggs",
         age: 30,
@@ -1324,7 +1207,6 @@ export const LONG_DATA_ELEMENTS_WITH_DESCRIPTIONS = [
                 data: "Unverified",
                 icon: alertIconSVG,
             },
-            actionElement: copyButton,
         },
         lastName: "Bloggy",
         age: 31,
@@ -1333,7 +1215,6 @@ export const LONG_DATA_ELEMENTS_WITH_DESCRIPTIONS = [
     },
     {
         firstName: {
-            actionElement: copyButton,
             description: "Alias: The Ghost",
         },
         lastName: "Blogger",
@@ -1859,7 +1740,35 @@ export const SlottedPagination = () => {
     dataTable.appendChild(paginationBar);
     return dataTable;
 };
-export const ActionElement = () => createDataTableElement("Action Element", COLS, ACTION_DATA_ELEMENTS);
+export const ActionElement = () => {
+    const dataTable = createDataTableElement("Action Element", COLS, DATA);
+    const actionElement = document.createElement("div");
+    actionElement.setAttribute("slot", "firstName-0-action-element");
+    actionElement.setAttribute("style", "display: flex");
+    const downloadButtonEl = document.createElement("ic-button");
+    downloadButtonEl.setAttribute("variant", "icon");
+    downloadButtonEl.setAttribute("size", "small");
+    downloadButtonEl.addEventListener("click", () => alert("Download button clicked"));
+    downloadButtonEl.innerHTML = downloadIconSVG;
+    downloadButtonEl.setAttribute("aria-label", "Download data");
+    actionElement.appendChild(downloadButtonEl);
+    const cellphoneButtonEl = document.createElement("ic-button");
+    cellphoneButtonEl.setAttribute("variant", "icon");
+    cellphoneButtonEl.setAttribute("size", "small");
+    cellphoneButtonEl.addEventListener("click", () => alert("Cellphone button clicked"));
+    cellphoneButtonEl.innerHTML = cellphoneIconSVG;
+    cellphoneButtonEl.setAttribute("aria-label", "Call phone");
+    actionElement.appendChild(cellphoneButtonEl);
+    const copyButtonEl = document.createElement("ic-button");
+    copyButtonEl.setAttribute("variant", "icon");
+    copyButtonEl.setAttribute("size", "small");
+    copyButtonEl.addEventListener("click", () => alert("Copy button clicked"));
+    copyButtonEl.innerHTML = copyIconSVG;
+    copyButtonEl.setAttribute("aria-label", "Copy data");
+    actionElement.appendChild(copyButtonEl);
+    dataTable.appendChild(actionElement);
+    return dataTable;
+};
 export const MissingCellData = () => createDataTableElement("Missing Cell Data", COLS, DATA_WITH_EMPTY_VALUES);
 export const SelectWithCheckbox = () => {
     const dataTable = createDataTableElement("Select using checkboxes", COLS, DATA);