@jobber/components 2.86.2 → 2.87.0

package/CHANGELOG.md

@@ -8,6 +8,17 @@ menu: Changelog
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.87.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.86.2...@jobber/components@2.87.0) (2022-11-02)
+
+
+### Features
+
+* **components:** Data table component ([#925](https://github.com/GetJobber/atlantis/issues/925)) ([777f4dc](https://github.com/GetJobber/atlantis/commit/777f4dce695e0c28880db77483e6d77903b7b484))
+
+
+
+
+
 ## [2.86.2](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.86.1...@jobber/components@2.86.2) (2022-11-01)
 
 **Note:** Version bump only for package @jobber/components

package/DataTable.d.ts

@@ -0,0 +1 @@
+export * from "./dist/DataTable";

package/DataTable.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var DataTable = require("./dist/DataTable");
+
+Object.keys(DataTable).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return DataTable[key];
+    },
+  });
+});

package/dist/DataTable/Body.d.ts

@@ -0,0 +1,7 @@
+import { Row, Table } from "@tanstack/react-table";
+interface BodyProps<T> {
+    table: Table<T>;
+    onRowClick?: (row: Row<T>) => void;
+}
+export declare function Body<T extends object>({ table, onRowClick }: BodyProps<T>): JSX.Element;
+export {};

package/dist/DataTable/DataTable.d.ts

@@ -0,0 +1,48 @@
+import { ColumnDef, Row } from "@tanstack/react-table";
+import { Pagination, Sorting } from "./types";
+export interface DataTableProps<T> {
+    /**
+     * The actual data that will be used for the table.
+     * Typescript should infer T from typeof data.
+     *
+     */
+    data: T[];
+    /**
+     * Should follow the @tanstack/react-table [ColumnDef](https://tanstack.com/table/v8/docs/guide/column-defs).
+     * [createColumnHelper](https://tanstack.com/table/v8/docs/guide/column-defs#column-helpers) is also exposed to make it more convenient
+     * to create columns.
+     */
+    columns: ColumnDef<T>[];
+    /**
+     * Enables pagination, mostly follows:
+     * https://tanstack.com/table/v8/docs/api/features/pagination
+     *
+     */
+    pagination?: Pagination;
+    /**
+     * Enables sorting, mostly follows:
+     * https://tanstack.com/table/v8/docs/api/features/sorting#table-options
+     *
+     */
+    sorting?: Sorting;
+    /**
+     * This will force the table to have the specified hight
+     *
+     */
+    height?: number;
+    /**
+     * When set to true makes the header sticky while scrolling vertically
+     *
+     */
+    stickyHeader?: boolean;
+    /**
+     * Pins the firstColumn when scrolling horizontally
+     *
+     */
+    pinFirstColumn?: boolean;
+    /**
+     * Enables row click action. The provided callback will be executed when the row is clicked.
+     */
+    onRowClick?: (row: Row<T>) => void;
+}
+export declare function DataTable<T extends object>({ data, columns, pagination, sorting, height, stickyHeader, pinFirstColumn, onRowClick, }: DataTableProps<T>): JSX.Element;

package/dist/DataTable/Footer.d.ts

@@ -0,0 +1,8 @@
+import { Table } from "@tanstack/react-table";
+interface FooterProps<T> {
+    table: Table<T>;
+    itemsPerPage?: number[];
+    totalItems: number;
+}
+export declare function Footer<T extends object>({ table, itemsPerPage, totalItems, }: FooterProps<T>): JSX.Element;
+export {};

package/dist/DataTable/Header.d.ts

@@ -0,0 +1,10 @@
+import { Row, Table } from "@tanstack/react-table";
+import { Sorting } from "./types";
+interface HeaderProps<T> {
+    table: Table<T>;
+    stickyHeader?: boolean;
+    sorting?: Sorting;
+    onRowClick?: (row: Row<T>) => void;
+}
+export declare function Header<T extends object>({ table, stickyHeader, sorting, onRowClick, }: HeaderProps<T>): JSX.Element;
+export {};

package/dist/DataTable/createTableSettings.d.ts

@@ -0,0 +1,6 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { Pagination, Sorting } from "./types";
+export declare function createTableSettings<T>(data: T[], columns: ColumnDef<T>[], options?: {
+    pagination?: Pagination;
+    sorting?: Sorting;
+}): any;

package/dist/DataTable/index.d.ts

@@ -0,0 +1,3 @@
+export { DataTable } from "./DataTable";
+export * from "./types";
+export { Row, ColumnDef, createColumnHelper, PaginationState, SortingState, } from "@tanstack/react-table";

package/dist/DataTable/index.js

@@ -0,0 +1,190 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactTable = require('@tanstack/react-table');
+var classnames = require('classnames');
+var React = require('react');
+var styleInject_es = require('../style-inject.es-dcee06b6.js');
+var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
+var Option = require('../Option-201e55a7.js');
+var Button = require('../Button-5b2f1636.js');
+var Icon = require('../Icon-d5ad1a6d.js');
+require('../FormField-a92c7bac.js');
+require('uuid');
+require('react-hook-form');
+require('../Text-9bc093e9.js');
+require('../Typography-7e542a72.js');
+require('../InputValidation-24d3621a.js');
+require('framer-motion');
+require('../Spinner-18d3dee6.js');
+require('react-router-dom');
+require('@jobber/design');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var css$1 = "._1gVnBnwO8rEyN5yXaSAnJz {\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-base);\n}\n\n._2FsiaQmYMKjm0oAa_Dm7Jv {\n  overflow: auto;\n}\n\n._2EflglZd2SRwkv61KFJrg9 {\n  width: 100%;\n  border-collapse: collapse;\n  text-align: left;\n}\n\n._2EflglZd2SRwkv61KFJrg9 thead tr th {\n  padding: var(--space-base);\n  border-bottom: var(--border-base) solid var(--color-border);\n  color: var(--color-heading);\n  white-space: nowrap;\n}\n\n._2EflglZd2SRwkv61KFJrg9 thead tr th :first-child {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n._2EflglZd2SRwkv61KFJrg9 tbody tr {\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n\n._2EflglZd2SRwkv61KFJrg9 tbody tr:last-child {\n  border-bottom: none;\n}\n\n._2EflglZd2SRwkv61KFJrg9 tbody tr td {\n  padding: var(--space-base);\n}\n\n.QRm47JXl1pWi9jKv7PNPG thead tr th:first-child,\n.QRm47JXl1pWi9jKv7PNPG tbody tr td:first-child {\n  position: sticky;\n  left: 0;\n  z-index: 1;\n  height: calc(var(--space-largest) + var(--space-smaller));\n  background-color: var(--color-white);\n}\n\n.QRm47JXl1pWi9jKv7PNPG th:first-child::after,\n.QRm47JXl1pWi9jKv7PNPG td:first-child::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  right: calc(-1 * var(--space-small));\n  width: var(--space-small);\n  height: 100%;\n  background: linear-gradient(\n    90deg,\n    rgba(var(--color-black--rgb), 0.1) 0%,\n    rgba(var(--color-black--rgb), 0) 80%\n  );\n}\n\n._3VxR0m_2LtggJeSToEDE2y {\n  position: sticky;\n  top: 0;\n  right: 0;\n  left: 0;\n  z-index: 2;\n  box-shadow: var(--shadow-base);\n  background-color: var(--color-white);\n}\n\n._1RROVWbMjf1ZfuVpquC4OS:first-child:hover {\n  background: var(--color-surface--hover);\n  cursor: pointer;\n}\n\n._2uM74VHCeNJuZjyD_SPXR3:hover {\n  background: var(--color-surface--hover);\n  cursor: pointer;\n}\n\n._3P5HGvBjzojCSGgtBjPjJi:hover,\n._3P5HGvBjzojCSGgtBjPjJi:hover :first-child {\n  background: var(--color-surface--background);\n  cursor: pointer;\n}\n";
+var styles$1 = {"dataTableContainer":"_1gVnBnwO8rEyN5yXaSAnJz","tableContainer":"_2FsiaQmYMKjm0oAa_Dm7Jv","table":"_2EflglZd2SRwkv61KFJrg9","pinFirstColumn":"QRm47JXl1pWi9jKv7PNPG","stickyHeader":"_3VxR0m_2LtggJeSToEDE2y","pinFirstHeaderSortable":"_1RROVWbMjf1ZfuVpquC4OS","sortableColumn":"_2uM74VHCeNJuZjyD_SPXR3","clickableRow":"_3P5HGvBjzojCSGgtBjPjJi"};
+styleInject_es.styleInject(css$1);
+
+function Body(_a) {
+    var _b;
+    var table = _a.table, onRowClick = _a.onRowClick;
+    var bodyRowClasses = classnames__default["default"]((_b = {}, _b[styles$1.clickableRow] = !!onRowClick, _b));
+    var handleRowClick = React.useCallback(function (row) { return function () {
+        if (onRowClick == undefined)
+            return;
+        onRowClick(row);
+    }; }, [onRowClick]);
+    return (React__default["default"].createElement("tbody", null, table.getRowModel().rows.map(function (row) {
+        return (React__default["default"].createElement("tr", { key: row.id, onClick: handleRowClick(row), className: bodyRowClasses }, row.getVisibleCells().map(function (cell) {
+            return (React__default["default"].createElement("td", { key: cell.id }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())));
+        })));
+    })));
+}
+
+function createTableSettings(data, columns, options) {
+    var _a;
+    var _b = getPaginationSettings(options === null || options === void 0 ? void 0 : options.pagination), paginationState = _b.state, restPaginationSettings = tslib_es6.__rest(_b, ["state"]);
+    var _c = getSortingSettings(options === null || options === void 0 ? void 0 : options.sorting), sortingState = _c.state, restSortingSettings = tslib_es6.__rest(_c, ["state"]);
+    var initialPatinationState;
+    if ((_a = options === null || options === void 0 ? void 0 : options.pagination) === null || _a === void 0 ? void 0 : _a.itemsPerPage) {
+        initialPatinationState = {
+            pageIndex: 0,
+            pageSize: options.pagination.itemsPerPage[0],
+        };
+    }
+    var tableSettings = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({ data: data,
+        columns: columns, state: tslib_es6.__assign(tslib_es6.__assign({}, paginationState), sortingState), getCoreRowModel: reactTable.getCoreRowModel() }, restPaginationSettings), restSortingSettings), { initialState: {
+            pagination: initialPatinationState,
+        } });
+    return tableSettings;
+}
+function getPaginationSettings(pagination) {
+    var paginationSettings = {};
+    if (!pagination) {
+        return paginationSettings;
+    }
+    var manualPagination = pagination.manualPagination;
+    paginationSettings.manualPagination = manualPagination;
+    if (manualPagination) {
+        var state = pagination.state, pageCount = pagination.pageCount, onPaginationChange = pagination.onPaginationChange;
+        paginationSettings.state = { pagination: state };
+        paginationSettings.pageCount = pageCount;
+        paginationSettings.onPaginationChange = onPaginationChange;
+    }
+    else {
+        paginationSettings.getPaginationRowModel = reactTable.getPaginationRowModel();
+    }
+    return paginationSettings;
+}
+function getSortingSettings(sorting) {
+    var sortingSettings = {};
+    if (!sorting)
+        return sortingSettings;
+    var manualSorting = sorting.manualSorting;
+    sortingSettings.manualSorting = manualSorting;
+    if (manualSorting) {
+        var onSortingChange = sorting.onSortingChange, state = sorting.state, enableSortingRemoval = sorting.enableSortingRemoval;
+        sortingSettings.state = { sorting: state };
+        sortingSettings.onSortingChange = onSortingChange;
+        sortingSettings.enableSortingRemoval = enableSortingRemoval !== null && enableSortingRemoval !== void 0 ? enableSortingRemoval : true;
+    }
+    else {
+        sortingSettings.getSortedRowModel = reactTable.getSortedRowModel();
+    }
+    return sortingSettings;
+}
+
+var css = ".xOgYLdnq9RzYdm2Qq5iqC {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  min-height: calc(var(--space-smaller) + var(--space-largest));\n  padding: var(--space-small) var(--space-base);\n  border-top: var(--border-base) solid var(--color-border);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n}\n\n._5tzeLx9ms3KlKYLww3zz2 {\n  -ms-flex: 9999;\n      flex: 9999;\n  white-space: nowrap;\n}\n\n.A-j9vM1Jh_lwiUvFWTrJD {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  grid-gap: var(--space-base);\n  grid-gap: var(--space-base);\n  gap: var(--space-base);\n  -ms-flex: 1;\n      flex: 1;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  min-width: -webkit-fit-content;\n  min-width: -moz-fit-content;\n  min-width: fit-content;\n}\n\n._1NDStXNYtxDXtO-D6fhMq7 {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  min-width: calc(3 * var(--space-largest) + var(--space-small));\n}\n\n._2jptOEeMFsy02Ak4RJ2Txr {\n  min-width: calc(var(--space-extravagant) + var(--space-smaller));\n}\n\n._1hior9YLNayoFJtpVbcrzk {\n  display: -ms-flexbox;\n  display: flex;\n  grid-gap: var(--space-large);\n  grid-gap: var(--space-large);\n  gap: var(--space-large);\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: center;\n      justify-content: center\n}\n\n@media (max-width: 639px) {\n\n._1hior9YLNayoFJtpVbcrzk {\n    grid-gap: var(--space-base);\n    grid-gap: var(--space-base);\n    gap: var(--space-base)\n}\n  }\n\n@media (max-width: 639px) {\n\n._1hior9YLNayoFJtpVbcrzk {\n    grid-gap: var(--space-base);\n    grid-gap: var(--space-base);\n    gap: var(--space-base)\n}\n  }\n\n@media (--handhelds) {\n\n._1hior9YLNayoFJtpVbcrzk {\n    grid-gap: var(--space-base);\n    grid-gap: var(--space-base);\n    gap: var(--space-base)\n}\n  }\n";
+var styles = {"pagination":"xOgYLdnq9RzYdm2Qq5iqC","paginationInfo":"_5tzeLx9ms3KlKYLww3zz2","paginationNav":"A-j9vM1Jh_lwiUvFWTrJD","paginationSelect":"_1NDStXNYtxDXtO-D6fhMq7","paginationSelectLabel":"_2jptOEeMFsy02Ak4RJ2Txr","paginationButtons":"_1hior9YLNayoFJtpVbcrzk"};
+styleInject_es.styleInject(css);
+
+function Footer(_a) {
+    var table = _a.table, itemsPerPage = _a.itemsPerPage, totalItems = _a.totalItems;
+    var _b = table.getState().pagination, pageIndex = _b.pageIndex, pageSize = _b.pageSize;
+    var totalRows = totalItems;
+    var firstPosition = pageIndex * pageSize + 1;
+    var secondPosition = Math.min(totalRows, pageSize * (pageIndex + 1));
+    var defaultItemsPerPageOptions = React.useMemo(function () { return ["10", "20", "30", "40", "50"]; }, []);
+    var itemsPerPageOptions = React.useMemo(function () { var _a; return (_a = itemsPerPage === null || itemsPerPage === void 0 ? void 0 : itemsPerPage.map(function (item) { return String(item); })) !== null && _a !== void 0 ? _a : defaultItemsPerPageOptions; }, [itemsPerPage]);
+    return (React__default["default"].createElement("div", { className: styles.pagination },
+        React__default["default"].createElement("div", { className: styles.paginationInfo }, "Showing " + firstPosition + "-" + secondPosition + " of " + totalRows + " items"),
+        React__default["default"].createElement("div", { className: styles.paginationNav },
+            React__default["default"].createElement("div", { className: styles.paginationSelect },
+                React__default["default"].createElement(Option.Select, { value: table.getState().pagination.pageSize, onChange: function (value) {
+                        table.setPageSize(Number(value));
+                    } }, itemsPerPageOptions.map(function (numOfPages) { return (React__default["default"].createElement(Option.SelectOption, { key: numOfPages, value: numOfPages }, numOfPages)); })),
+                React__default["default"].createElement("span", { className: styles.paginationSelectLabel }, "per page")),
+            React__default["default"].createElement("div", { className: styles.paginationButtons },
+                React__default["default"].createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowLeft", ariaLabel: "arrowLeft", onClick: function () { return table.previousPage(); }, disabled: !table.getCanPreviousPage() }),
+                React__default["default"].createElement(Button.Button, { type: "secondary", variation: "subtle", icon: "arrowRight", ariaLabel: "arrowRight", onClick: function () { return table.nextPage(); }, disabled: !table.getCanNextPage() })))));
+}
+
+function Header(_a) {
+    var _b;
+    var table = _a.table, stickyHeader = _a.stickyHeader, sorting = _a.sorting, onRowClick = _a.onRowClick;
+    var stickyClass = classnames__default["default"]((_b = {}, _b[styles$1.stickyHeader] = stickyHeader, _b));
+    return (React__default["default"].createElement("thead", { className: stickyClass }, table.getHeaderGroups().map(function (headerGroup) { return (React__default["default"].createElement("tr", { key: headerGroup.id }, headerGroup.headers.map(function (header) {
+        var _a;
+        var _b;
+        return (React__default["default"].createElement("th", { key: header.id, colSpan: header.colSpan, className: sorting && header.column.getCanSort()
+                ? classnames__default["default"](styles$1.sortableColumn, (_a = {},
+                    _a[styles$1.pinFirstHeaderSortable] = !!onRowClick,
+                    _a))
+                : "", onClick: sorting ? header.column.getToggleSortingHandler() : undefined }, header.isPlaceholder ? null : (React__default["default"].createElement("div", null,
+            reactTable.flexRender(header.column.columnDef.header, header.getContext()), (_b = {
+            asc: React__default["default"].createElement(Icon.Icon, { name: "longArrowUp", color: "green" }),
+            desc: React__default["default"].createElement(Icon.Icon, { name: "longArrowDown", color: "green" }),
+        }[header.column.getIsSorted()]) !== null && _b !== void 0 ? _b : (React__default["default"].createElement("svg", { style: {
+                width: "var(--space-large)",
+                height: "var(--space-large)",
+            } }))))));
+    }))); })));
+}
+
+function DataTable(_a) {
+    var _b;
+    var data = _a.data, columns = _a.columns, pagination = _a.pagination, sorting = _a.sorting, height = _a.height, stickyHeader = _a.stickyHeader, pinFirstColumn = _a.pinFirstColumn, onRowClick = _a.onRowClick;
+    var tableSettings = createTableSettings(data, columns, {
+        pagination: pagination,
+        sorting: sorting,
+    });
+    var tableClasses = classnames__default["default"](styles$1.table, (_b = {},
+        _b[styles$1.pinFirstColumn] = pinFirstColumn,
+        _b));
+    var table = reactTable.useReactTable(tableSettings);
+    return (React__default["default"].createElement("div", { className: styles$1.dataTableContainer },
+        React__default["default"].createElement("div", { className: styles$1.tableContainer, style: { height: height } },
+            React__default["default"].createElement("table", { className: tableClasses },
+                React__default["default"].createElement(Header, { table: table, sorting: sorting, onRowClick: onRowClick, stickyHeader: stickyHeader }),
+                React__default["default"].createElement(Body, { table: table, onRowClick: onRowClick }))),
+        pagination && (React__default["default"].createElement(Footer, { table: table, itemsPerPage: pagination.itemsPerPage, totalItems: pagination.manualPagination
+                ? pagination.totalItems
+                : table.getCoreRowModel().rows.length }))));
+}
+
+Object.defineProperty(exports, 'ColumnDef', {
+  enumerable: true,
+  get: function () { return reactTable.ColumnDef; }
+});
+Object.defineProperty(exports, 'PaginationState', {
+  enumerable: true,
+  get: function () { return reactTable.PaginationState; }
+});
+Object.defineProperty(exports, 'Row', {
+  enumerable: true,
+  get: function () { return reactTable.Row; }
+});
+Object.defineProperty(exports, 'SortingState', {
+  enumerable: true,
+  get: function () { return reactTable.SortingState; }
+});
+Object.defineProperty(exports, 'createColumnHelper', {
+  enumerable: true,
+  get: function () { return reactTable.createColumnHelper; }
+});
+exports.DataTable = DataTable;

package/dist/DataTable/test-utilities/index.d.ts

@@ -0,0 +1 @@
+export * from "./mocks";

package/dist/DataTable/test-utilities/mocks.d.ts

@@ -0,0 +1,11 @@
+import { ColumnDef } from "@tanstack/react-table";
+interface Data {
+    name: string;
+    house: string;
+    region: string;
+    sigil: string;
+    isAlive: string;
+}
+export declare const data: Data[];
+export declare const columns: ColumnDef<Data>[];
+export {};

package/dist/DataTable/types.d.ts

@@ -0,0 +1,83 @@
+import { PaginationState, SortingState } from "@tanstack/react-table";
+import { Dispatch, SetStateAction } from "react";
+export interface ManualPagination {
+    /**
+     * When manually controlled represents the current pagination state of the table.
+     *
+     * @type {PaginationState}
+     */
+    state: PaginationState;
+    /**
+     * When manually controlling pagination, you should supply a total pageCount value to the table if you know it.
+     * If you do not know how many pages there are, you can set this to -1. (Or should we error?)
+     *
+     * @type {number}
+     */
+    pageCount: number;
+    /**
+     * If this function is provided, it will be called when the pagination state changes and you will be expected
+     * to manage the state yourself. You can pass the managed state back to the table via the state option.
+     */
+    onPaginationChange: Dispatch<SetStateAction<PaginationState>>;
+    /**
+     * Enables manual pagination. If this option is set to true,
+     * the table will not automatically paginate and instead will expect you
+     * to manually paginate the rows before passing them to the table.
+     *
+     * @type {boolean}
+     */
+    manualPagination: true;
+    /**
+     * The options to control the pagination
+     *
+     * @type {number[]}
+     * @memberof Pagination
+     */
+    itemsPerPage?: number[];
+    /**
+     * When manual pagination is enable the total numbers of
+     * records in the table should be provided.
+     *
+     * @type {number}
+     * @memberof Pagination
+     */
+    totalItems: number;
+}
+export interface DefaultPagination {
+    manualPagination: false;
+    itemsPerPage?: number[];
+}
+export declare type Pagination = DefaultPagination | ManualPagination;
+export interface ManualSorting {
+    /**
+     * Represents the current sorting state of the table.
+     *
+     * @type {SortingState}
+     */
+    state: SortingState;
+    /**
+     * Enables manual sorting for the table.
+     *
+     * @type {boolean}
+     */
+    manualSorting: true;
+    /**
+     * This overrides the default internal state management,
+     * so you will need to persist the state change either fully or partially outside of the table.
+     */
+    onSortingChange: Dispatch<SetStateAction<SortingState>>;
+    /**
+     * Enables/Disables the ability to remove sorting for the table.
+     *
+     */
+    enableSortingRemoval?: boolean;
+}
+export interface DefaultSorting {
+    /**
+     * Enables manual sorting for the table.
+     *
+     * @type {boolean}
+     */
+    manualSorting: false;
+}
+export declare type Sorting = DefaultSorting | ManualSorting;

package/dist/Option-201e55a7.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
+var React = require('react');
+var FormField = require('./FormField-a92c7bac.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function Select(props) {
+    return React__default["default"].createElement(FormField.FormField, tslib_es6.__assign({ type: "select" }, props));
+}
+
+function SelectOption(_a) {
+    var children = _a.children, disabled = _a.disabled, value = _a.value;
+    return (React__default["default"].createElement("option", { disabled: disabled, value: value }, children));
+}
+
+exports.Select = Select;
+exports.SelectOption = SelectOption;

package/dist/Select/index.js

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
-var React = require('react');
-var FormField = require('../FormField-a92c7bac.js');
+var Option = require('../Option-201e55a7.js');
+require('../tslib.es6-5b50eb8e.js');
+require('react');
+require('../FormField-a92c7bac.js');
 require('uuid');
 require('react-hook-form');
 require('../style-inject.es-dcee06b6.js');
@@ -19,18 +20,7 @@ require('../InputValidation-24d3621a.js');
 require('framer-motion');
 require('../Spinner-18d3dee6.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function Select(props) {
-    return React__default["default"].createElement(FormField.FormField, tslib_es6.__assign({ type: "select" }, props));
-}
-
-function SelectOption(_a) {
-    var children = _a.children, disabled = _a.disabled, value = _a.value;
-    return (React__default["default"].createElement("option", { disabled: disabled, value: value }, children));
-}
-
-exports.Option = SelectOption;
-exports.Select = Select;
+exports.Option = Option.SelectOption;
+exports.Select = Option.Select;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "2.86.2",
+  "version": "2.87.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -22,6 +22,7 @@
     "@jobber/hooks": "^1.12.1",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
+    "@tanstack/react-table": "8.5.13",
     "@types/color": "^3.0.1",
     "@types/lodash": "^4.14.136",
     "@types/react-datepicker": "^4.3.2",
@@ -83,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "eb444943eb3b4c83c68f696fc40d14f8a678658e"
+  "gitHead": "fce989b8ed43d2375c784579251d446f182424fd"
 }