@jobber/components 6.81.0 → 6.82.0

package/dist/DataTable/DataTable.d.ts

@@ -1,6 +1,7 @@
 import { ColumnDef, Row } from "@tanstack/react-table";
 import React, { ReactNode } from "react";
 import { PaginationType, SortingType } from "./types";
+import { DataTableActions, DataTableBody, DataTableContainer, DataTableFooter, DataTableHeader, DataTableHeaderCell, DataTablePagination, DataTablePaginationButton, DataTableRowActions, DataTableSortableHeader, DataTableTable } from "./components";
 export interface DataTableProps<T> {
     /**
      * The actual data that will be used for the table.
@@ -55,3 +56,18 @@ export interface DataTableProps<T> {
     readonly loading?: boolean;
 }
 export declare function DataTable<T extends object>({ data, columns, pagination, sorting, height, stickyHeader, pinFirstColumn, onRowClick, emptyState, loading, }: DataTableProps<T>): React.JSX.Element;
+export declare namespace DataTable {
+    var Table: typeof DataTableTable;
+    var Header: typeof DataTableHeader;
+    var HeaderCell: typeof DataTableHeaderCell;
+    var Row: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+    var Cell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+    var RowActions: typeof DataTableRowActions;
+    var Actions: typeof DataTableActions;
+    var Body: typeof DataTableBody;
+    var Container: typeof DataTableContainer;
+    var SortableHeader: typeof DataTableSortableHeader;
+    var Footer: typeof DataTableFooter;
+    var Pagination: typeof DataTablePagination;
+    var PaginationButton: typeof DataTablePaginationButton;
+}

package/dist/DataTable/components/DataTableActions.d.ts

@@ -0,0 +1,2 @@
+import React, { type PropsWithChildren } from "react";
+export declare function DataTableActions(props: PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>): React.JSX.Element;

package/dist/DataTable/components/DataTableBody.d.ts

@@ -0,0 +1,2 @@
+import React, { type PropsWithChildren } from "react";
+export declare function DataTableBody(props: PropsWithChildren<React.HTMLAttributes<HTMLTableSectionElement>>): React.JSX.Element;

package/dist/DataTable/components/DataTableCell.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const DataTableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;

package/dist/DataTable/components/DataTableContainer.d.ts

@@ -0,0 +1,2 @@
+import React, { type PropsWithChildren } from "react";
+export declare function DataTableContainer(props: PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>): React.JSX.Element;

package/dist/DataTable/components/DataTableFooter.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface DataTableFooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+    readonly children: React.ReactNode;
+    /**
+     * Number of columns to span across. This should match the number of columns in your table.
+     */
+    readonly colSpan: number;
+}
+export declare function DataTableFooter({ children, className, colSpan, ...props }: DataTableFooterProps): React.JSX.Element;

package/dist/DataTable/components/DataTableHeader.d.ts

@@ -0,0 +1,2 @@
+import React, { type PropsWithChildren } from "react";
+export declare function DataTableHeader(props: PropsWithChildren<React.HTMLAttributes<HTMLTableSectionElement>>): React.JSX.Element;

package/dist/DataTable/components/DataTableHeaderCell.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare function DataTableHeaderCell(props: React.ThHTMLAttributes<HTMLTableCellElement>): React.JSX.Element;
+export declare namespace DataTableHeaderCell {
+    var displayName: string;
+}

package/dist/DataTable/components/DataTablePagination.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export interface DataTablePaginationProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly children: React.ReactNode;
+}
+export declare function DataTablePagination({ children, className, ...props }: DataTablePaginationProps): React.JSX.Element;

package/dist/DataTable/components/DataTablePaginationButton.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+export interface DataTablePaginationButtonProps {
+    /**
+     * The direction of the pagination button
+     */
+    readonly direction: "previous" | "next";
+    /**
+     * Callback function when the pagination button is clicked
+     */
+    readonly onClick?: () => void;
+    /**
+     * Whether the pagination button is disabled
+     */
+    readonly disabled?: boolean;
+    /**
+     * Function that returns the aria-label for the button. Required for accessibility.
+     * Should return translated strings based on the direction parameter.
+     */
+    readonly ariaLabel: (direction: "previous" | "next") => string;
+}
+export declare function DataTablePaginationButton({ direction, onClick, disabled, ariaLabel, }: DataTablePaginationButtonProps): React.JSX.Element;

package/dist/DataTable/components/DataTableRow.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const DataTableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;

package/dist/DataTable/components/DataTableRowActions.d.ts

@@ -0,0 +1,4 @@
+import React, { type PropsWithChildren } from "react";
+export declare function DataTableRowActions(props: PropsWithChildren<{
+    readonly className?: string;
+}>): React.JSX.Element;

package/dist/DataTable/components/DataTableSortableHeader.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { SortDirection } from "../SortIcon";
+export interface DataTableSortableHeaderProps {
+    /**
+     * The header content to display (text, icons, etc.)
+     */
+    readonly children: React.ReactNode;
+    /**
+     * The current sort direction for this column. When undefined, the header renders as non-interactive.
+     */
+    readonly direction?: SortDirection;
+    /**
+     * Callback function triggered when the sortable header is clicked.
+     * When undefined, the header renders as non-interactive.
+     */
+    readonly onSort?: () => void;
+}
+export declare function DataTableSortableHeader(props: DataTableSortableHeaderProps & React.HTMLAttributes<HTMLTableCellElement>): JSX.Element;

package/dist/DataTable/components/DataTableTable.d.ts

@@ -0,0 +1,2 @@
+import React, { type PropsWithChildren } from "react";
+export declare function DataTableTable(props: PropsWithChildren<React.HTMLAttributes<HTMLTableElement>>): React.JSX.Element;

package/dist/DataTable/components/index.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+var DataTableTable = require('../../DataTableTable-cjs.js');
+require('react');
+require('classnames');
+require('../../tslib.es6-cjs.js');
+require('../../Button-cjs.js');
+require('react-router-dom');
+require('../../Icon-cjs.js');
+require('@jobber/design');
+require('../../Typography-cjs.js');
+
+
+
+exports.DataTableActions = DataTableTable.DataTableActions;
+exports.DataTableBody = DataTableTable.DataTableBody;
+exports.DataTableCell = DataTableTable.DataTableCell;
+exports.DataTableContainer = DataTableTable.DataTableContainer;
+exports.DataTableFooter = DataTableTable.DataTableFooter;
+exports.DataTableHeader = DataTableTable.DataTableHeader;
+exports.DataTableHeaderCell = DataTableTable.DataTableHeaderCell;
+exports.DataTablePagination = DataTableTable.DataTablePagination;
+exports.DataTablePaginationButton = DataTableTable.DataTablePaginationButton;
+exports.DataTableRow = DataTableTable.DataTableRow;
+exports.DataTableRowActions = DataTableTable.DataTableRowActions;
+exports.DataTableSortableHeader = DataTableTable.DataTableSortableHeader;
+exports.DataTableTable = DataTableTable.DataTableTable;

package/dist/DataTable/components/index.d.ts

@@ -0,0 +1,13 @@
+export { DataTableActions } from "./DataTableActions";
+export { DataTableBody } from "./DataTableBody";
+export { DataTableCell } from "./DataTableCell";
+export { DataTableContainer } from "./DataTableContainer";
+export { DataTableFooter } from "./DataTableFooter";
+export { DataTableHeader } from "./DataTableHeader";
+export { DataTableHeaderCell } from "./DataTableHeaderCell";
+export { DataTablePagination } from "./DataTablePagination";
+export { DataTablePaginationButton } from "./DataTablePaginationButton";
+export { DataTableRow } from "./DataTableRow";
+export { DataTableRowActions } from "./DataTableRowActions";
+export { DataTableSortableHeader } from "./DataTableSortableHeader";
+export { DataTableTable } from "./DataTableTable";

package/dist/DataTable/components/index.mjs

@@ -0,0 +1,9 @@
+export { D as DataTableActions, b as DataTableBody, c as DataTableCell, d as DataTableContainer, e as DataTableFooter, f as DataTableHeader, g as DataTableHeaderCell, h as DataTablePagination, i as DataTablePaginationButton, j as DataTableRow, k as DataTableRowActions, l as DataTableSortableHeader, m as DataTableTable } from '../../DataTableTable-es.js';
+import 'react';
+import 'classnames';
+import '../../tslib.es6-es.js';
+import '../../Button-es.js';
+import 'react-router-dom';
+import '../../Icon-es.js';
+import '@jobber/design';
+import '../../Typography-es.js';

package/dist/DataTable/index.cjs

@@ -2,6 +2,7 @@
 
 var DataTable = require('../DataTable-cjs.js');
 var helpers = require('../helpers-cjs.js');
+var DataTableTable = require('../DataTableTable-cjs.js');
 var reactTable = require('@tanstack/react-table');
 require('classnames');
 require('react');
@@ -41,6 +42,11 @@ require('react-hook-form');
 
 exports.DataTable = DataTable.DataTable;
 exports.mockContainerWidth = helpers.mockContainerWidth;
+Object.defineProperty(exports, "SortDirection", {
+	enumerable: true,
+	get: function () { return DataTableTable.SortDirection; }
+});
+exports.SortIcon = DataTableTable.SortIcon;
 Object.defineProperty(exports, "createColumnHelper", {
 	enumerable: true,
 	get: function () { return reactTable.createColumnHelper; }

package/dist/DataTable/index.d.ts

@@ -1,4 +1,5 @@
 export { DataTable } from "./DataTable";
 export * from "./types";
 export * from "./test-utilities/helpers";
+export { SortIcon, SortDirection } from "./SortIcon";
 export { Row, ColumnDef, createColumnHelper, PaginationState, SortingState, } from "@tanstack/react-table";

package/dist/DataTable/index.mjs

@@ -1,5 +1,6 @@
 export { D as DataTable } from '../DataTable-es.js';
 export { m as mockContainerWidth } from '../helpers-es.js';
+export { a as SortDirection, S as SortIcon } from '../DataTableTable-es.js';
 export { createColumnHelper } from '@tanstack/react-table';
 import 'classnames';
 import 'react';

package/dist/DataTable-cjs.js

@@ -9,8 +9,9 @@ var tslib_es6 = require('./tslib.es6-cjs.js');
 var Select_index = require('./Select/index.cjs');
 var Button = require('./Button-cjs.js');
 var Text = require('./Text-cjs.js');
+var DataTableTable = require('./DataTableTable-cjs.js');
 
-var styles$3 = {"dataTableContainer":"_3IHK46TSBOI-","tableContainer":"_8CMtSx4qamA-","table":"bNYpzdn5rPc-","pinFirstColumn":"lKXqbcsnCFs-","emptyStateCell":"i-x8vss2hcI-","stickyHeader":"eWffzdKfJH0-","pinFirstHeaderSortable":"aGF6t8l8iUk-","sortableColumn":"W0kYDUxPkqI-","clickableRow":"vWFyXrAaFtQ-","emptyState":"_8L7icG7E530-","spinning":"O1cxELzWgmM-"};
+var styles$2 = {"dataTableContainer":"_3IHK46TSBOI-","tableContainer":"_8CMtSx4qamA-","table":"bNYpzdn5rPc-","pinFirstColumn":"lKXqbcsnCFs-","emptyStateCell":"i-x8vss2hcI-","stickyHeader":"eWffzdKfJH0-","pinFirstHeaderSortable":"aGF6t8l8iUk-","sortableColumn":"W0kYDUxPkqI-","clickableRow":"vWFyXrAaFtQ-","emptyState":"_8L7icG7E530-","spinning":"O1cxELzWgmM-"};
 
 function BodyLoading({ table }) {
     const loaderRows = table.getState().pagination.pageSize;
@@ -20,7 +21,7 @@ function BodyLoading({ table }) {
 }
 
 function Body({ table, onRowClick, emptyState, loading, }) {
-    const bodyRowClasses = classnames({ [styles$3.clickableRow]: !!onRowClick });
+    const bodyRowClasses = classnames({ [styles$2.clickableRow]: !!onRowClick });
     const handleRowClick = React.useCallback((row) => () => {
         if (onRowClick == undefined)
             return;
@@ -39,8 +40,8 @@ function Body({ table, onRowClick, emptyState, loading, }) {
         })));
     }))) : (React.createElement("tbody", null,
         React.createElement("tr", { className: bodyRowClasses },
-            React.createElement("td", { colSpan: table.getAllColumns().length, className: styles$3.emptyStateCell },
-                React.createElement("div", { className: styles$3.emptyState }, emptyState)))))));
+            React.createElement("td", { colSpan: table.getAllColumns().length, className: styles$2.emptyStateCell },
+                React.createElement("div", { className: styles$2.emptyState }, emptyState)))))));
 }
 
 function createTableSettings(data, columns, options) {
@@ -96,7 +97,7 @@ function getSortingSettings(sorting) {
     return sortingSettings;
 }
 
-var styles$2 = {"pagination":"_5TLZRabskzI-","paginationInfo":"k8VFFgHUPZ4-","paginationNav":"SfaHBP7KC3Y-","paginationSelect":"E4zFf5oEm-Y-","paginationSelectLabel":"N4LhT5occ94-","paginationButtons":"HQPsyRjssL0-","spinning":"YHT2Mg0618I-"};
+var styles$1 = {"pagination":"_5TLZRabskzI-","paginationInfo":"k8VFFgHUPZ4-","paginationNav":"SfaHBP7KC3Y-","paginationSelect":"E4zFf5oEm-Y-","paginationSelectLabel":"N4LhT5occ94-","paginationButtons":"HQPsyRjssL0-","spinning":"YHT2Mg0618I-"};
 
 const defaultItemsPerPageOptions = ["10", "20", "30", "40", "50"];
 function Pagination({ table, itemsPerPage, totalItems, loading, onPageChange, }) {
@@ -105,16 +106,16 @@ function Pagination({ table, itemsPerPage, totalItems, loading, onPageChange, })
     const firstPosition = pageIndex * pageSize + 1;
     const secondPosition = Math.min(totalRows, pageSize * (pageIndex + 1));
     const itemsPerPageOptions = React.useMemo(() => { var _a; return (_a = itemsPerPage === null || itemsPerPage === void 0 ? void 0 : itemsPerPage.map(item => String(item))) !== null && _a !== void 0 ? _a : defaultItemsPerPageOptions; }, [itemsPerPage]);
-    return secondPosition <= 0 ? (React.createElement("div", { className: styles$2.pagination },
-        React.createElement("div", { className: styles$2.paginationInfo }, !loading ? React.createElement(Text.Text, null, "No items") : React.createElement(Glimmer.Glimmer, { width: 200 })))) : (React.createElement("div", { className: styles$2.pagination },
-        React.createElement("div", { className: styles$2.paginationInfo }, `Showing ${firstPosition}-${secondPosition} of ${totalRows} items`),
-        React.createElement("div", { className: styles$2.paginationNav },
-            React.createElement("div", { className: styles$2.paginationSelect },
+    return secondPosition <= 0 ? (React.createElement("div", { className: styles$1.pagination },
+        React.createElement("div", { className: styles$1.paginationInfo }, !loading ? React.createElement(Text.Text, null, "No items") : React.createElement(Glimmer.Glimmer, { width: 200 })))) : (React.createElement("div", { className: styles$1.pagination },
+        React.createElement("div", { className: styles$1.paginationInfo }, `Showing ${firstPosition}-${secondPosition} of ${totalRows} items`),
+        React.createElement("div", { className: styles$1.paginationNav },
+            React.createElement("div", { className: styles$1.paginationSelect },
                 React.createElement(Select_index.Select, { value: table.getState().pagination.pageSize, onChange: value => {
                         table.setPageSize(Number(value));
                     }, size: "small" }, itemsPerPageOptions.map(numOfPages => (React.createElement(Select_index.Option, { key: numOfPages, value: numOfPages }, numOfPages)))),
-                React.createElement("span", { className: styles$2.paginationSelectLabel }, "per page")),
-            React.createElement("div", { className: styles$2.paginationButtons },
+                React.createElement("span", { className: styles$1.paginationSelectLabel }, "per page")),
+            React.createElement("div", { className: styles$1.paginationButtons },
                 React.createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowLeft", ariaLabel: "arrowLeft", onClick: () => {
                         table.previousPage();
                         onPageChange();
@@ -125,18 +126,18 @@ function Pagination({ table, itemsPerPage, totalItems, loading, onPageChange, })
                     }, disabled: !table.getCanNextPage() })))));
 }
 
-var styles$1 = {"mobileFooterContainer":"wMM6V80Rt-w-","mobileFooterRow":"HAoSIniVNvI-","mobileFooterRowData":"mNGvTIKaQIA-","spinning":"u7HdA4nq7qM-"};
+var styles = {"mobileFooterContainer":"wMM6V80Rt-w-","mobileFooterRow":"HAoSIniVNvI-","mobileFooterRowData":"mNGvTIKaQIA-","spinning":"u7HdA4nq7qM-"};
 
 const DesktopView = ({ table }) => (React.createElement("tfoot", { "data-testid": "data-table-desktop-footer" }, table.getFooterGroups().map(footerGroup => (React.createElement("tr", { key: footerGroup.id }, footerGroup.headers.map(header => (React.createElement("th", { key: header.id, style: {
         width: header.getSize(),
         minWidth: header.column.columnDef.minSize,
         maxWidth: header.column.columnDef.maxSize,
     } }, reactTable.flexRender(header.column.columnDef.footer, header.getContext())))))))));
-const HandheldView = ({ table }) => (React.createElement("div", { className: styles$1.mobileFooterContainer, "data-testid": "data-table-handheld-footer" }, table.getFooterGroups().map(footerGroup => (React.createElement("div", { key: footerGroup.id }, footerGroup.headers
+const HandheldView = ({ table }) => (React.createElement("div", { className: styles.mobileFooterContainer, "data-testid": "data-table-handheld-footer" }, table.getFooterGroups().map(footerGroup => (React.createElement("div", { key: footerGroup.id }, footerGroup.headers
     .filter(header => header.column.columnDef.footer)
-    .map((header, index) => (React.createElement(React.Fragment, null, index === 0 ? (React.createElement("div", { className: styles$1.mobileFooterRow }, reactTable.flexRender(header.column.columnDef.footer, header.getContext()))) : (React.createElement("div", { className: styles$1.mobileFooterRow, key: footerGroup.id },
+    .map((header, index) => (React.createElement(React.Fragment, null, index === 0 ? (React.createElement("div", { className: styles.mobileFooterRow }, reactTable.flexRender(header.column.columnDef.footer, header.getContext()))) : (React.createElement("div", { className: styles.mobileFooterRow, key: footerGroup.id },
     reactTable.flexRender(header.column.columnDef.header, header.getContext()),
-    React.createElement("div", { className: styles$1.mobileFooterRowData }, reactTable.flexRender(header.column.columnDef.footer, header.getContext()))))))))))));
+    React.createElement("div", { className: styles.mobileFooterRowData }, reactTable.flexRender(header.column.columnDef.footer, header.getContext()))))))))))));
 const Footer = ({ table, viewType = "handheld", }) => {
     const hasFooter = table
         .getAllColumns()
@@ -147,42 +148,8 @@ const Footer = ({ table, viewType = "handheld", }) => {
     return null;
 };
 
-var styles = {"sortIcon":"NrRExUGE6GY-","inactive":"e3aVa36Y7W8-","active":"lDKd982Sr-w-","spinning":"D9cW6RdlpZ0-"};
-
-var SortDirection;
-(function (SortDirection) {
-    SortDirection[SortDirection["ascending"] = 0] = "ascending";
-    SortDirection[SortDirection["descending"] = 1] = "descending";
-    SortDirection[SortDirection["equilibrium"] = 2] = "equilibrium";
-})(SortDirection || (SortDirection = {}));
-const sortStyleIndex = [
-    {
-        option: SortDirection.equilibrium,
-        upArrowStyle: undefined,
-        downArrowStyle: undefined,
-    },
-    {
-        option: SortDirection.ascending,
-        upArrowStyle: classnames(styles.active),
-        downArrowStyle: classnames(styles.inactive),
-    },
-    {
-        option: SortDirection.descending,
-        upArrowStyle: classnames(styles.inactive),
-        downArrowStyle: classnames(styles.active),
-    },
-];
-function SortIcon({ direction }) {
-    const foundStyle = sortStyleIndex.find(style => style.option === direction);
-    const finalStyle = foundStyle === undefined ? sortStyleIndex[0] : foundStyle;
-    return (React.createElement("div", { className: classnames(styles.sortIcon) },
-        React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-            React.createElement("path", { className: finalStyle.upArrowStyle, d: "M16.2929 10.6661C15.9024 11.0566 15.2692 11.0566 14.8787 10.6661L12.2891 8.14263L9.70711 10.6661C9.31658 11.0566 8.68342 11.0566 8.29289 10.6661C7.90237 10.2756 7.90237 9.64239 8.29289 9.25186L11.5858 5.95897C11.9763 5.56845 12.6095 5.56845 13 5.95897L16.2929 9.25186C16.6834 9.64239 16.6834 10.2756 16.2929 10.6661Z" }),
-            React.createElement("path", { className: finalStyle.downArrowStyle, d: "M8.29292 13.3339C8.68345 12.9434 9.31661 12.9434 9.70714 13.3339L12.2968 15.8573L14.8787 13.3339C15.2692 12.9434 15.9024 12.9434 16.2929 13.3339C16.6834 13.7244 16.6834 14.3576 16.2929 14.7481L13 18.041C12.6095 18.4315 11.9763 18.4315 11.5858 18.041L8.29292 14.7481C7.9024 14.3576 7.9024 13.7244 8.29292 13.3339Z" }))));
-}
-
 function Header({ table, stickyHeader, sorting, onRowClick, }) {
-    const stickyClass = classnames({ [styles$3.stickyHeader]: stickyHeader });
+    const stickyClass = classnames({ [styles$2.stickyHeader]: stickyHeader });
     return (React.createElement("thead", { className: stickyClass }, table.getHeaderGroups().map(headerGroup => (React.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map(header => {
         const isSorting = sorting && header.column.getCanSort();
         const headingCellInlineStyle = {
@@ -194,17 +161,17 @@ function Header({ table, stickyHeader, sorting, onRowClick, }) {
             headingCellInlineStyle.paddingRight = 0;
         }
         return (React.createElement("th", { key: header.id, colSpan: header.colSpan, className: isSorting
-                ? classnames(styles$3.sortableColumn, {
-                    [styles$3.pinFirstHeaderSortable]: !!onRowClick,
+                ? classnames(styles$2.sortableColumn, {
+                    [styles$2.pinFirstHeaderSortable]: !!onRowClick,
                 })
                 : "", onClick: sorting ? header.column.getToggleSortingHandler() : undefined, style: headingCellInlineStyle }, header.isPlaceholder ? null : (React.createElement("div", null,
             reactTable.flexRender(header.column.columnDef.header, header.getContext()),
             header.column.getCanSort() &&
                 sorting &&
-                !header.column.getIsSorted() && (React.createElement(SortIcon, { direction: SortDirection.equilibrium })),
+                !header.column.getIsSorted() && (React.createElement(DataTableTable.SortIcon, { direction: DataTableTable.SortDirection.equilibrium })),
             {
-                asc: React.createElement(SortIcon, { direction: SortDirection.ascending }),
-                desc: React.createElement(SortIcon, { direction: SortDirection.descending }),
+                asc: React.createElement(DataTableTable.SortIcon, { direction: DataTableTable.SortDirection.ascending }),
+                desc: React.createElement(DataTableTable.SortIcon, { direction: DataTableTable.SortDirection.descending }),
             }[header.column.getIsSorted()]))));
     }))))));
 }
@@ -215,12 +182,12 @@ function DataTable({ data, columns, pagination, sorting, height, stickyHeader, p
         pagination,
         sorting,
     });
-    const tableClasses = classnames(styles$3.table, {
-        [styles$3.pinFirstColumn]: pinFirstColumn,
+    const tableClasses = classnames(styles$2.table, {
+        [styles$2.pinFirstColumn]: pinFirstColumn,
     });
     const table = reactTable.useReactTable(tableSettings);
-    return (React.createElement("div", { className: styles$3.dataTableContainer },
-        React.createElement("div", { "data-testid": "ATL-DataTable-Container", className: styles$3.tableContainer, style: { height }, ref: ref },
+    return (React.createElement("div", { className: styles$2.dataTableContainer },
+        React.createElement("div", { "data-testid": "ATL-DataTable-Container", className: styles$2.tableContainer, style: { height }, ref: ref },
             React.createElement("table", { className: tableClasses },
                 React.createElement(Header, { table: table, sorting: sorting, onRowClick: onRowClick, stickyHeader: stickyHeader }),
                 React.createElement(Body, { table: table, onRowClick: onRowClick, emptyState: emptyState, loading: loading }),
@@ -234,5 +201,18 @@ function DataTable({ data, columns, pagination, sorting, height, stickyHeader, p
                 ? pagination.totalItems
                 : table.getCoreRowModel().rows.length, loading: loading, onPageChange: () => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0); } }))));
 }
+DataTable.Table = DataTableTable.DataTableTable;
+DataTable.Header = DataTableTable.DataTableHeader;
+DataTable.HeaderCell = DataTableTable.DataTableHeaderCell;
+DataTable.Row = DataTableTable.DataTableRow;
+DataTable.Cell = DataTableTable.DataTableCell;
+DataTable.RowActions = DataTableTable.DataTableRowActions;
+DataTable.Actions = DataTableTable.DataTableActions;
+DataTable.Body = DataTableTable.DataTableBody;
+DataTable.Container = DataTableTable.DataTableContainer;
+DataTable.SortableHeader = DataTableTable.DataTableSortableHeader;
+DataTable.Footer = DataTableTable.DataTableFooter;
+DataTable.Pagination = DataTableTable.DataTablePagination;
+DataTable.PaginationButton = DataTableTable.DataTablePaginationButton;
 
 exports.DataTable = DataTable;

package/dist/DataTable-es.js

@@ -7,8 +7,9 @@ import { _ as __rest } from './tslib.es6-es.js';
 import { Select, Option as SelectOption } from './Select/index.mjs';
 import { B as Button } from './Button-es.js';
 import { T as Text } from './Text-es.js';
+import { S as SortIcon, a as SortDirection, m as DataTableTable, f as DataTableHeader, g as DataTableHeaderCell, j as DataTableRow, c as DataTableCell, k as DataTableRowActions, D as DataTableActions, b as DataTableBody, d as DataTableContainer, l as DataTableSortableHeader, e as DataTableFooter, h as DataTablePagination, i as DataTablePaginationButton } from './DataTableTable-es.js';
 
-var styles$3 = {"dataTableContainer":"_3IHK46TSBOI-","tableContainer":"_8CMtSx4qamA-","table":"bNYpzdn5rPc-","pinFirstColumn":"lKXqbcsnCFs-","emptyStateCell":"i-x8vss2hcI-","stickyHeader":"eWffzdKfJH0-","pinFirstHeaderSortable":"aGF6t8l8iUk-","sortableColumn":"W0kYDUxPkqI-","clickableRow":"vWFyXrAaFtQ-","emptyState":"_8L7icG7E530-","spinning":"O1cxELzWgmM-"};
+var styles$2 = {"dataTableContainer":"_3IHK46TSBOI-","tableContainer":"_8CMtSx4qamA-","table":"bNYpzdn5rPc-","pinFirstColumn":"lKXqbcsnCFs-","emptyStateCell":"i-x8vss2hcI-","stickyHeader":"eWffzdKfJH0-","pinFirstHeaderSortable":"aGF6t8l8iUk-","sortableColumn":"W0kYDUxPkqI-","clickableRow":"vWFyXrAaFtQ-","emptyState":"_8L7icG7E530-","spinning":"O1cxELzWgmM-"};
 
 function BodyLoading({ table }) {
     const loaderRows = table.getState().pagination.pageSize;
@@ -18,7 +19,7 @@ function BodyLoading({ table }) {
 }
 
 function Body({ table, onRowClick, emptyState, loading, }) {
-    const bodyRowClasses = classnames({ [styles$3.clickableRow]: !!onRowClick });
+    const bodyRowClasses = classnames({ [styles$2.clickableRow]: !!onRowClick });
     const handleRowClick = useCallback((row) => () => {
         if (onRowClick == undefined)
             return;
@@ -37,8 +38,8 @@ function Body({ table, onRowClick, emptyState, loading, }) {
         })));
     }))) : (React__default.createElement("tbody", null,
         React__default.createElement("tr", { className: bodyRowClasses },
-            React__default.createElement("td", { colSpan: table.getAllColumns().length, className: styles$3.emptyStateCell },
-                React__default.createElement("div", { className: styles$3.emptyState }, emptyState)))))));
+            React__default.createElement("td", { colSpan: table.getAllColumns().length, className: styles$2.emptyStateCell },
+                React__default.createElement("div", { className: styles$2.emptyState }, emptyState)))))));
 }
 
 function createTableSettings(data, columns, options) {
@@ -94,7 +95,7 @@ function getSortingSettings(sorting) {
     return sortingSettings;
 }
 
-var styles$2 = {"pagination":"_5TLZRabskzI-","paginationInfo":"k8VFFgHUPZ4-","paginationNav":"SfaHBP7KC3Y-","paginationSelect":"E4zFf5oEm-Y-","paginationSelectLabel":"N4LhT5occ94-","paginationButtons":"HQPsyRjssL0-","spinning":"YHT2Mg0618I-"};
+var styles$1 = {"pagination":"_5TLZRabskzI-","paginationInfo":"k8VFFgHUPZ4-","paginationNav":"SfaHBP7KC3Y-","paginationSelect":"E4zFf5oEm-Y-","paginationSelectLabel":"N4LhT5occ94-","paginationButtons":"HQPsyRjssL0-","spinning":"YHT2Mg0618I-"};
 
 const defaultItemsPerPageOptions = ["10", "20", "30", "40", "50"];
 function Pagination({ table, itemsPerPage, totalItems, loading, onPageChange, }) {
@@ -103,16 +104,16 @@ function Pagination({ table, itemsPerPage, totalItems, loading, onPageChange, })
     const firstPosition = pageIndex * pageSize + 1;
     const secondPosition = Math.min(totalRows, pageSize * (pageIndex + 1));
     const itemsPerPageOptions = useMemo(() => { var _a; return (_a = itemsPerPage === null || itemsPerPage === void 0 ? void 0 : itemsPerPage.map(item => String(item))) !== null && _a !== void 0 ? _a : defaultItemsPerPageOptions; }, [itemsPerPage]);
-    return secondPosition <= 0 ? (React__default.createElement("div", { className: styles$2.pagination },
-        React__default.createElement("div", { className: styles$2.paginationInfo }, !loading ? React__default.createElement(Text, null, "No items") : React__default.createElement(Glimmer, { width: 200 })))) : (React__default.createElement("div", { className: styles$2.pagination },
-        React__default.createElement("div", { className: styles$2.paginationInfo }, `Showing ${firstPosition}-${secondPosition} of ${totalRows} items`),
-        React__default.createElement("div", { className: styles$2.paginationNav },
-            React__default.createElement("div", { className: styles$2.paginationSelect },
+    return secondPosition <= 0 ? (React__default.createElement("div", { className: styles$1.pagination },
+        React__default.createElement("div", { className: styles$1.paginationInfo }, !loading ? React__default.createElement(Text, null, "No items") : React__default.createElement(Glimmer, { width: 200 })))) : (React__default.createElement("div", { className: styles$1.pagination },
+        React__default.createElement("div", { className: styles$1.paginationInfo }, `Showing ${firstPosition}-${secondPosition} of ${totalRows} items`),
+        React__default.createElement("div", { className: styles$1.paginationNav },
+            React__default.createElement("div", { className: styles$1.paginationSelect },
                 React__default.createElement(Select, { value: table.getState().pagination.pageSize, onChange: value => {
                         table.setPageSize(Number(value));
                     }, size: "small" }, itemsPerPageOptions.map(numOfPages => (React__default.createElement(SelectOption, { key: numOfPages, value: numOfPages }, numOfPages)))),
-                React__default.createElement("span", { className: styles$2.paginationSelectLabel }, "per page")),
-            React__default.createElement("div", { className: styles$2.paginationButtons },
+                React__default.createElement("span", { className: styles$1.paginationSelectLabel }, "per page")),
+            React__default.createElement("div", { className: styles$1.paginationButtons },
                 React__default.createElement(Button, { type: "secondary", variation: "subtle", icon: "arrowLeft", ariaLabel: "arrowLeft", onClick: () => {
                         table.previousPage();
                         onPageChange();
@@ -123,18 +124,18 @@ function Pagination({ table, itemsPerPage, totalItems, loading, onPageChange, })
                     }, disabled: !table.getCanNextPage() })))));
 }
 
-var styles$1 = {"mobileFooterContainer":"wMM6V80Rt-w-","mobileFooterRow":"HAoSIniVNvI-","mobileFooterRowData":"mNGvTIKaQIA-","spinning":"u7HdA4nq7qM-"};
+var styles = {"mobileFooterContainer":"wMM6V80Rt-w-","mobileFooterRow":"HAoSIniVNvI-","mobileFooterRowData":"mNGvTIKaQIA-","spinning":"u7HdA4nq7qM-"};
 
 const DesktopView = ({ table }) => (React__default.createElement("tfoot", { "data-testid": "data-table-desktop-footer" }, table.getFooterGroups().map(footerGroup => (React__default.createElement("tr", { key: footerGroup.id }, footerGroup.headers.map(header => (React__default.createElement("th", { key: header.id, style: {
         width: header.getSize(),
         minWidth: header.column.columnDef.minSize,
         maxWidth: header.column.columnDef.maxSize,
     } }, flexRender(header.column.columnDef.footer, header.getContext())))))))));
-const HandheldView = ({ table }) => (React__default.createElement("div", { className: styles$1.mobileFooterContainer, "data-testid": "data-table-handheld-footer" }, table.getFooterGroups().map(footerGroup => (React__default.createElement("div", { key: footerGroup.id }, footerGroup.headers
+const HandheldView = ({ table }) => (React__default.createElement("div", { className: styles.mobileFooterContainer, "data-testid": "data-table-handheld-footer" }, table.getFooterGroups().map(footerGroup => (React__default.createElement("div", { key: footerGroup.id }, footerGroup.headers
     .filter(header => header.column.columnDef.footer)
-    .map((header, index) => (React__default.createElement(React__default.Fragment, null, index === 0 ? (React__default.createElement("div", { className: styles$1.mobileFooterRow }, flexRender(header.column.columnDef.footer, header.getContext()))) : (React__default.createElement("div", { className: styles$1.mobileFooterRow, key: footerGroup.id },
+    .map((header, index) => (React__default.createElement(React__default.Fragment, null, index === 0 ? (React__default.createElement("div", { className: styles.mobileFooterRow }, flexRender(header.column.columnDef.footer, header.getContext()))) : (React__default.createElement("div", { className: styles.mobileFooterRow, key: footerGroup.id },
     flexRender(header.column.columnDef.header, header.getContext()),
-    React__default.createElement("div", { className: styles$1.mobileFooterRowData }, flexRender(header.column.columnDef.footer, header.getContext()))))))))))));
+    React__default.createElement("div", { className: styles.mobileFooterRowData }, flexRender(header.column.columnDef.footer, header.getContext()))))))))))));
 const Footer = ({ table, viewType = "handheld", }) => {
     const hasFooter = table
         .getAllColumns()
@@ -145,42 +146,8 @@ const Footer = ({ table, viewType = "handheld", }) => {
     return null;
 };
 
-var styles = {"sortIcon":"NrRExUGE6GY-","inactive":"e3aVa36Y7W8-","active":"lDKd982Sr-w-","spinning":"D9cW6RdlpZ0-"};
-
-var SortDirection;
-(function (SortDirection) {
-    SortDirection[SortDirection["ascending"] = 0] = "ascending";
-    SortDirection[SortDirection["descending"] = 1] = "descending";
-    SortDirection[SortDirection["equilibrium"] = 2] = "equilibrium";
-})(SortDirection || (SortDirection = {}));
-const sortStyleIndex = [
-    {
-        option: SortDirection.equilibrium,
-        upArrowStyle: undefined,
-        downArrowStyle: undefined,
-    },
-    {
-        option: SortDirection.ascending,
-        upArrowStyle: classnames(styles.active),
-        downArrowStyle: classnames(styles.inactive),
-    },
-    {
-        option: SortDirection.descending,
-        upArrowStyle: classnames(styles.inactive),
-        downArrowStyle: classnames(styles.active),
-    },
-];
-function SortIcon({ direction }) {
-    const foundStyle = sortStyleIndex.find(style => style.option === direction);
-    const finalStyle = foundStyle === undefined ? sortStyleIndex[0] : foundStyle;
-    return (React__default.createElement("div", { className: classnames(styles.sortIcon) },
-        React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-            React__default.createElement("path", { className: finalStyle.upArrowStyle, d: "M16.2929 10.6661C15.9024 11.0566 15.2692 11.0566 14.8787 10.6661L12.2891 8.14263L9.70711 10.6661C9.31658 11.0566 8.68342 11.0566 8.29289 10.6661C7.90237 10.2756 7.90237 9.64239 8.29289 9.25186L11.5858 5.95897C11.9763 5.56845 12.6095 5.56845 13 5.95897L16.2929 9.25186C16.6834 9.64239 16.6834 10.2756 16.2929 10.6661Z" }),
-            React__default.createElement("path", { className: finalStyle.downArrowStyle, d: "M8.29292 13.3339C8.68345 12.9434 9.31661 12.9434 9.70714 13.3339L12.2968 15.8573L14.8787 13.3339C15.2692 12.9434 15.9024 12.9434 16.2929 13.3339C16.6834 13.7244 16.6834 14.3576 16.2929 14.7481L13 18.041C12.6095 18.4315 11.9763 18.4315 11.5858 18.041L8.29292 14.7481C7.9024 14.3576 7.9024 13.7244 8.29292 13.3339Z" }))));
-}
-
 function Header({ table, stickyHeader, sorting, onRowClick, }) {
-    const stickyClass = classnames({ [styles$3.stickyHeader]: stickyHeader });
+    const stickyClass = classnames({ [styles$2.stickyHeader]: stickyHeader });
     return (React__default.createElement("thead", { className: stickyClass }, table.getHeaderGroups().map(headerGroup => (React__default.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map(header => {
         const isSorting = sorting && header.column.getCanSort();
         const headingCellInlineStyle = {
@@ -192,8 +159,8 @@ function Header({ table, stickyHeader, sorting, onRowClick, }) {
             headingCellInlineStyle.paddingRight = 0;
         }
         return (React__default.createElement("th", { key: header.id, colSpan: header.colSpan, className: isSorting
-                ? classnames(styles$3.sortableColumn, {
-                    [styles$3.pinFirstHeaderSortable]: !!onRowClick,
+                ? classnames(styles$2.sortableColumn, {
+                    [styles$2.pinFirstHeaderSortable]: !!onRowClick,
                 })
                 : "", onClick: sorting ? header.column.getToggleSortingHandler() : undefined, style: headingCellInlineStyle }, header.isPlaceholder ? null : (React__default.createElement("div", null,
             flexRender(header.column.columnDef.header, header.getContext()),
@@ -213,12 +180,12 @@ function DataTable({ data, columns, pagination, sorting, height, stickyHeader, p
         pagination,
         sorting,
     });
-    const tableClasses = classnames(styles$3.table, {
-        [styles$3.pinFirstColumn]: pinFirstColumn,
+    const tableClasses = classnames(styles$2.table, {
+        [styles$2.pinFirstColumn]: pinFirstColumn,
     });
     const table = useReactTable(tableSettings);
-    return (React__default.createElement("div", { className: styles$3.dataTableContainer },
-        React__default.createElement("div", { "data-testid": "ATL-DataTable-Container", className: styles$3.tableContainer, style: { height }, ref: ref },
+    return (React__default.createElement("div", { className: styles$2.dataTableContainer },
+        React__default.createElement("div", { "data-testid": "ATL-DataTable-Container", className: styles$2.tableContainer, style: { height }, ref: ref },
             React__default.createElement("table", { className: tableClasses },
                 React__default.createElement(Header, { table: table, sorting: sorting, onRowClick: onRowClick, stickyHeader: stickyHeader }),
                 React__default.createElement(Body, { table: table, onRowClick: onRowClick, emptyState: emptyState, loading: loading }),
@@ -232,5 +199,18 @@ function DataTable({ data, columns, pagination, sorting, height, stickyHeader, p
                 ? pagination.totalItems
                 : table.getCoreRowModel().rows.length, loading: loading, onPageChange: () => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0); } }))));
 }
+DataTable.Table = DataTableTable;
+DataTable.Header = DataTableHeader;
+DataTable.HeaderCell = DataTableHeaderCell;
+DataTable.Row = DataTableRow;
+DataTable.Cell = DataTableCell;
+DataTable.RowActions = DataTableRowActions;
+DataTable.Actions = DataTableActions;
+DataTable.Body = DataTableBody;
+DataTable.Container = DataTableContainer;
+DataTable.SortableHeader = DataTableSortableHeader;
+DataTable.Footer = DataTableFooter;
+DataTable.Pagination = DataTablePagination;
+DataTable.PaginationButton = DataTablePaginationButton;
 
 export { DataTable as D };

package/dist/DataTableTable-cjs.js

@@ -0,0 +1,127 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var tslib_es6 = require('./tslib.es6-cjs.js');
+var Button = require('./Button-cjs.js');
+
+var styles$1 = {"sortIcon":"NrRExUGE6GY-","inactive":"e3aVa36Y7W8-","active":"lDKd982Sr-w-","spinning":"D9cW6RdlpZ0-"};
+
+exports.SortDirection = void 0;
+(function (SortDirection) {
+    SortDirection[SortDirection["ascending"] = 0] = "ascending";
+    SortDirection[SortDirection["descending"] = 1] = "descending";
+    SortDirection[SortDirection["equilibrium"] = 2] = "equilibrium";
+})(exports.SortDirection || (exports.SortDirection = {}));
+const sortStyleIndex = [
+    {
+        option: exports.SortDirection.equilibrium,
+        upArrowStyle: undefined,
+        downArrowStyle: undefined,
+    },
+    {
+        option: exports.SortDirection.ascending,
+        upArrowStyle: classnames(styles$1.active),
+        downArrowStyle: classnames(styles$1.inactive),
+    },
+    {
+        option: exports.SortDirection.descending,
+        upArrowStyle: classnames(styles$1.inactive),
+        downArrowStyle: classnames(styles$1.active),
+    },
+];
+function SortIcon({ direction }) {
+    const foundStyle = sortStyleIndex.find(style => style.option === direction);
+    const finalStyle = foundStyle === undefined ? sortStyleIndex[0] : foundStyle;
+    return (React.createElement("div", { className: classnames(styles$1.sortIcon) },
+        React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { className: finalStyle.upArrowStyle, d: "M16.2929 10.6661C15.9024 11.0566 15.2692 11.0566 14.8787 10.6661L12.2891 8.14263L9.70711 10.6661C9.31658 11.0566 8.68342 11.0566 8.29289 10.6661C7.90237 10.2756 7.90237 9.64239 8.29289 9.25186L11.5858 5.95897C11.9763 5.56845 12.6095 5.56845 13 5.95897L16.2929 9.25186C16.6834 9.64239 16.6834 10.2756 16.2929 10.6661Z" }),
+            React.createElement("path", { className: finalStyle.downArrowStyle, d: "M8.29292 13.3339C8.68345 12.9434 9.31661 12.9434 9.70714 13.3339L12.2968 15.8573L14.8787 13.3339C15.2692 12.9434 15.9024 12.9434 16.2929 13.3339C16.6834 13.7244 16.6834 14.3576 16.2929 14.7481L13 18.041C12.6095 18.4315 11.9763 18.4315 11.5858 18.041L8.29292 14.7481C7.9024 14.3576 7.9024 13.7244 8.29292 13.3339Z" }))));
+}
+
+var styles = {"container":"_1-DPmbxOkZ8-","tableElement":"kJeYcsgg700-","header":"_5d2OcsTVgzU-","headerCell":"LTx0tCU3F2I-","sortableButton":"WTQCrd2d8nw-","focusArea":"RipbH3rRU-E-","row":"sJQbtw-NEHU-","cell":"_1UpLYTK64uY-","footer":"qe-6UrAFLTo-","actions":"_2fZsLSaNPnI-","rowActions":"pElxuwpGmCI-","pagination":"thJ-CSoe0ps-","spinning":"EBpmC7cZzCs-"};
+
+function DataTableActions(props) {
+    return (React.createElement("div", Object.assign({ className: classnames(styles.actions, props.className) }, props), props.children));
+}
+
+function DataTableBody(props) {
+    return (React.createElement("tbody", Object.assign({ className: classnames(props.className) }, props), props.children));
+}
+
+const DataTableCell = React.forwardRef((props, ref) => {
+    return (React.createElement("td", Object.assign({}, props, { className: classnames(styles.cell, props.className), ref: ref }), props.children));
+});
+DataTableCell.displayName = "DataTableCell";
+
+function DataTableContainer(props) {
+    return (React.createElement("div", Object.assign({ className: classnames(styles.container, props.className) }, props), props.children));
+}
+
+function DataTableFooter(_a) {
+    var { children, className, colSpan } = _a, props = tslib_es6.__rest(_a, ["children", "className", "colSpan"]);
+    return (React.createElement("tfoot", Object.assign({ className: classnames(styles.footer, className) }, props),
+        React.createElement("tr", null,
+            React.createElement("td", { colSpan: colSpan }, children))));
+}
+
+function DataTableHeader(props) {
+    return (React.createElement("thead", Object.assign({ className: classnames(styles.header, props.className) }, props),
+        React.createElement("tr", null, props.children)));
+}
+
+function DataTableHeaderCell(props) {
+    return (React.createElement("th", Object.assign({}, props, { className: classnames(styles.headerCell, props.className) }), props.children));
+}
+DataTableHeaderCell.displayName = "DataTableHeaderCell";
+
+function DataTablePagination(_a) {
+    var { children, className } = _a, props = tslib_es6.__rest(_a, ["children", "className"]);
+    return (React.createElement("div", Object.assign({ className: classnames(styles.pagination, className) }, props), children));
+}
+
+function DataTablePaginationButton({ direction, onClick, disabled = false, ariaLabel, }) {
+    const isNext = direction === "next";
+    return (React.createElement(Button.Button, { label: "", onClick: onClick, icon: isNext ? "arrowRight" : "arrowLeft", type: "secondary", variation: "learning", disabled: disabled, ariaLabel: ariaLabel(direction) }));
+}
+
+const DataTableRow = React.forwardRef((props, ref) => {
+    return (React.createElement("tr", Object.assign({ className: classnames(styles.row, props.className), ref: ref }, props), props.children));
+});
+DataTableRow.displayName = "DataTableRow";
+
+function DataTableRowActions(props) {
+    return (React.createElement("div", { className: classnames(styles.rowActions, props.className) }, props.children));
+}
+
+function DataTableSortableHeader(props) {
+    const { children, direction, onSort } = props;
+    const isSortable = direction !== undefined && onSort !== undefined;
+    if (!isSortable) {
+        return React.createElement(DataTableHeaderCell, Object.assign({}, props), children);
+    }
+    return (React.createElement(DataTableHeaderCell, Object.assign({}, props),
+        React.createElement("button", { type: "button", onClick: onSort, className: styles.sortableButton },
+            React.createElement("span", { className: styles.focusArea },
+                children,
+                React.createElement(SortIcon, { direction: direction })))));
+}
+
+function DataTableTable(props) {
+    return (React.createElement("table", Object.assign({ className: classnames(styles.tableElement, props.className) }, props), props.children));
+}
+
+exports.DataTableActions = DataTableActions;
+exports.DataTableBody = DataTableBody;
+exports.DataTableCell = DataTableCell;
+exports.DataTableContainer = DataTableContainer;
+exports.DataTableFooter = DataTableFooter;
+exports.DataTableHeader = DataTableHeader;
+exports.DataTableHeaderCell = DataTableHeaderCell;
+exports.DataTablePagination = DataTablePagination;
+exports.DataTablePaginationButton = DataTablePaginationButton;
+exports.DataTableRow = DataTableRow;
+exports.DataTableRowActions = DataTableRowActions;
+exports.DataTableSortableHeader = DataTableSortableHeader;
+exports.DataTableTable = DataTableTable;
+exports.SortIcon = SortIcon;

package/dist/DataTableTable-es.js

@@ -0,0 +1,112 @@
+import React__default, { forwardRef } from 'react';
+import classnames from 'classnames';
+import { _ as __rest } from './tslib.es6-es.js';
+import { B as Button } from './Button-es.js';
+
+var styles$1 = {"sortIcon":"NrRExUGE6GY-","inactive":"e3aVa36Y7W8-","active":"lDKd982Sr-w-","spinning":"D9cW6RdlpZ0-"};
+
+var SortDirection;
+(function (SortDirection) {
+    SortDirection[SortDirection["ascending"] = 0] = "ascending";
+    SortDirection[SortDirection["descending"] = 1] = "descending";
+    SortDirection[SortDirection["equilibrium"] = 2] = "equilibrium";
+})(SortDirection || (SortDirection = {}));
+const sortStyleIndex = [
+    {
+        option: SortDirection.equilibrium,
+        upArrowStyle: undefined,
+        downArrowStyle: undefined,
+    },
+    {
+        option: SortDirection.ascending,
+        upArrowStyle: classnames(styles$1.active),
+        downArrowStyle: classnames(styles$1.inactive),
+    },
+    {
+        option: SortDirection.descending,
+        upArrowStyle: classnames(styles$1.inactive),
+        downArrowStyle: classnames(styles$1.active),
+    },
+];
+function SortIcon({ direction }) {
+    const foundStyle = sortStyleIndex.find(style => style.option === direction);
+    const finalStyle = foundStyle === undefined ? sortStyleIndex[0] : foundStyle;
+    return (React__default.createElement("div", { className: classnames(styles$1.sortIcon) },
+        React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React__default.createElement("path", { className: finalStyle.upArrowStyle, d: "M16.2929 10.6661C15.9024 11.0566 15.2692 11.0566 14.8787 10.6661L12.2891 8.14263L9.70711 10.6661C9.31658 11.0566 8.68342 11.0566 8.29289 10.6661C7.90237 10.2756 7.90237 9.64239 8.29289 9.25186L11.5858 5.95897C11.9763 5.56845 12.6095 5.56845 13 5.95897L16.2929 9.25186C16.6834 9.64239 16.6834 10.2756 16.2929 10.6661Z" }),
+            React__default.createElement("path", { className: finalStyle.downArrowStyle, d: "M8.29292 13.3339C8.68345 12.9434 9.31661 12.9434 9.70714 13.3339L12.2968 15.8573L14.8787 13.3339C15.2692 12.9434 15.9024 12.9434 16.2929 13.3339C16.6834 13.7244 16.6834 14.3576 16.2929 14.7481L13 18.041C12.6095 18.4315 11.9763 18.4315 11.5858 18.041L8.29292 14.7481C7.9024 14.3576 7.9024 13.7244 8.29292 13.3339Z" }))));
+}
+
+var styles = {"container":"_1-DPmbxOkZ8-","tableElement":"kJeYcsgg700-","header":"_5d2OcsTVgzU-","headerCell":"LTx0tCU3F2I-","sortableButton":"WTQCrd2d8nw-","focusArea":"RipbH3rRU-E-","row":"sJQbtw-NEHU-","cell":"_1UpLYTK64uY-","footer":"qe-6UrAFLTo-","actions":"_2fZsLSaNPnI-","rowActions":"pElxuwpGmCI-","pagination":"thJ-CSoe0ps-","spinning":"EBpmC7cZzCs-"};
+
+function DataTableActions(props) {
+    return (React__default.createElement("div", Object.assign({ className: classnames(styles.actions, props.className) }, props), props.children));
+}
+
+function DataTableBody(props) {
+    return (React__default.createElement("tbody", Object.assign({ className: classnames(props.className) }, props), props.children));
+}
+
+const DataTableCell = forwardRef((props, ref) => {
+    return (React__default.createElement("td", Object.assign({}, props, { className: classnames(styles.cell, props.className), ref: ref }), props.children));
+});
+DataTableCell.displayName = "DataTableCell";
+
+function DataTableContainer(props) {
+    return (React__default.createElement("div", Object.assign({ className: classnames(styles.container, props.className) }, props), props.children));
+}
+
+function DataTableFooter(_a) {
+    var { children, className, colSpan } = _a, props = __rest(_a, ["children", "className", "colSpan"]);
+    return (React__default.createElement("tfoot", Object.assign({ className: classnames(styles.footer, className) }, props),
+        React__default.createElement("tr", null,
+            React__default.createElement("td", { colSpan: colSpan }, children))));
+}
+
+function DataTableHeader(props) {
+    return (React__default.createElement("thead", Object.assign({ className: classnames(styles.header, props.className) }, props),
+        React__default.createElement("tr", null, props.children)));
+}
+
+function DataTableHeaderCell(props) {
+    return (React__default.createElement("th", Object.assign({}, props, { className: classnames(styles.headerCell, props.className) }), props.children));
+}
+DataTableHeaderCell.displayName = "DataTableHeaderCell";
+
+function DataTablePagination(_a) {
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    return (React__default.createElement("div", Object.assign({ className: classnames(styles.pagination, className) }, props), children));
+}
+
+function DataTablePaginationButton({ direction, onClick, disabled = false, ariaLabel, }) {
+    const isNext = direction === "next";
+    return (React__default.createElement(Button, { label: "", onClick: onClick, icon: isNext ? "arrowRight" : "arrowLeft", type: "secondary", variation: "learning", disabled: disabled, ariaLabel: ariaLabel(direction) }));
+}
+
+const DataTableRow = forwardRef((props, ref) => {
+    return (React__default.createElement("tr", Object.assign({ className: classnames(styles.row, props.className), ref: ref }, props), props.children));
+});
+DataTableRow.displayName = "DataTableRow";
+
+function DataTableRowActions(props) {
+    return (React__default.createElement("div", { className: classnames(styles.rowActions, props.className) }, props.children));
+}
+
+function DataTableSortableHeader(props) {
+    const { children, direction, onSort } = props;
+    const isSortable = direction !== undefined && onSort !== undefined;
+    if (!isSortable) {
+        return React__default.createElement(DataTableHeaderCell, Object.assign({}, props), children);
+    }
+    return (React__default.createElement(DataTableHeaderCell, Object.assign({}, props),
+        React__default.createElement("button", { type: "button", onClick: onSort, className: styles.sortableButton },
+            React__default.createElement("span", { className: styles.focusArea },
+                children,
+                React__default.createElement(SortIcon, { direction: direction })))));
+}
+
+function DataTableTable(props) {
+    return (React__default.createElement("table", Object.assign({ className: classnames(styles.tableElement, props.className) }, props), props.children));
+}
+
+export { DataTableActions as D, SortIcon as S, SortDirection as a, DataTableBody as b, DataTableCell as c, DataTableContainer as d, DataTableFooter as e, DataTableHeader as f, DataTableHeaderCell as g, DataTablePagination as h, DataTablePaginationButton as i, DataTableRow as j, DataTableRowActions as k, DataTableSortableHeader as l, DataTableTable as m };

package/dist/index.cjs

@@ -37,6 +37,7 @@ var DataDump = require('./DataDump-cjs.js');
 var DataList = require('./DataList-cjs.js');
 var DataTable = require('./DataTable-cjs.js');
 require('./useResizeObserver-cjs.js');
+require('./DataTableTable-cjs.js');
 var reactTable = require('@tanstack/react-table');
 var DatePicker = require('./DatePicker-cjs.js');
 var DescriptionList = require('./DescriptionList-cjs.js');

package/dist/index.mjs

@@ -35,6 +35,7 @@ export { D as DataDump } from './DataDump-es.js';
 export { D as DataList } from './DataList-es.js';
 export { D as DataTable } from './DataTable-es.js';
 import './useResizeObserver-es.js';
+import './DataTableTable-es.js';
 export { createColumnHelper } from '@tanstack/react-table';
 export { D as DatePicker } from './DatePicker-es.js';
 export { D as DescriptionList } from './DescriptionList-es.js';

package/dist/styles.css

@@ -6052,6 +6052,10 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 }
 
 .NrRExUGE6GY- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
   padding-right: 8px;
   padding-right: var(--space-small);
 }
@@ -6073,6 +6077,136 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   opacity: 0.6;
 }
 
+._1-DPmbxOkZ8- {
+  box-shadow: var(--shadow-small);
+  border: 1px solid hsl(200, 13%, 87%);
+  border: var(--border-base) solid var(--color-border);
+  border-radius: 8px;
+  border-radius: var(--radius-base);
+  overflow: hidden;
+}
+
+.kJeYcsgg700- {
+  width: 100%;
+  table-layout: auto;
+  border-collapse: collapse;
+}
+
+.kJeYcsgg700- tbody tr {
+  border-bottom: 1px solid hsl(200, 13%, 87%);
+  border-bottom: var(--border-base) solid var(--color-border);
+}
+
+.kJeYcsgg700- tbody tr:last-child {
+  border-bottom: none;
+}
+
+._5d2OcsTVgzU- {
+  border-bottom: 2px solid hsl(200, 13%, 87%);
+  border-bottom: var(--border-thick) solid var(--color-border);
+}
+
+.LTx0tCU3F2I- {
+  padding: 12px 16px;
+  padding: var(--space-slim) var(--space-base);
+  text-align: left;
+}
+
+.WTQCrd2d8nw- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  gap: 8px;
+  gap: var(--space-small);
+  width: 100%;
+  min-height: 24px;
+  padding: 0;
+  border: none;
+  outline: transparent;
+  color: inherit;
+  font: inherit;
+  background: none;
+  cursor: pointer;
+}
+
+.RipbH3rRU-E- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  gap: 8px;
+  gap: var(--space-small);
+  padding: 2px;
+  padding: var(--space-smallest);
+  border-radius: 8px;
+  border-radius: var(--radius-base);
+}
+
+.WTQCrd2d8nw-:focus-visible .RipbH3rRU-E- {
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
+  box-shadow: var(--shadow-focus);
+}
+
+.sJQbtw-NEHU- {
+  position: relative;
+}
+
+.sJQbtw-NEHU-:hover {
+  background-color: hsl(53, 21%, 93%);
+  background-color: var(--color-surface--hover);
+}
+
+._1UpLYTK64uY- {
+  padding: 12px 16px;
+  padding: var(--space-slim) var(--space-base);
+  text-align: left;
+}
+
+.qe-6UrAFLTo- {
+  border-top: 1px solid hsl(200, 13%, 87%);
+  border-top: var(--border-base) solid var(--color-border);
+}
+
+._2fZsLSaNPnI- {
+  display: -ms-flexbox;
+  display: flex;
+  gap: 12px;
+  gap: var(--space-slim);
+  padding-bottom: 16px;
+  padding-bottom: var(--space-base);
+}
+
+.pElxuwpGmCI- {
+  display: -ms-flexbox;
+  display: flex;
+  position: absolute;
+  top: 50%;
+  right: 16px;
+  right: var(--space-base);
+  z-index: 6;
+  z-index: var(--elevation-menu);
+  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-base);
+  padding: 2px;
+  padding: var(--space-smallest);
+  border: 1px solid hsl(200, 13%, 87%);
+  border: var(--border-base) solid var(--color-border);
+  border-radius: 8px;
+  border-radius: var(--radius-base);
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  gap: 2px;
+  gap: var(--space-smallest);
+}
+
+.thJ-CSoe0ps- {
+  padding: 8px 16px;
+  padding: var(--space-small) var(--space-base);
+}
+
 @charset "UTF-8";
 /* stylelint-disable */
 .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {

package/dist/utils/meta/meta.json

@@ -62,6 +62,19 @@
     "DataList.Search",
     "DataList.StatusBar",
     "DataTable",
+    "DataTable.Actions",
+    "DataTable.Body",
+    "DataTable.Cell",
+    "DataTable.Container",
+    "DataTable.Footer",
+    "DataTable.Header",
+    "DataTable.HeaderCell",
+    "DataTable.Pagination",
+    "DataTable.PaginationButton",
+    "DataTable.Row",
+    "DataTable.RowActions",
+    "DataTable.SortableHeader",
+    "DataTable.Table",
     "DatePicker",
     "DescriptionList",
     "Disclosure",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.81.0",
+  "version": "6.82.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -542,5 +542,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "0a0c72d9d554c30657ac0c9d0a88f8261770ac2e"
+  "gitHead": "451563dc96da61d6558b15f27e4c9cb9d7508259"
 }