@jobber/components 2.89.4 → 2.90.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.90.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.89.4...@jobber/components@2.90.0) (2022-12-19)
+
+
+### Features
+
+* **components:** Add configurable column width to DataTable ([#951](https://github.com/GetJobber/atlantis/issues/951)) ([01fad3e](https://github.com/GetJobber/atlantis/commit/01fad3e9e047dbdb7b69198efbdfd986c4c1d039))
+
+
+
+
+
 ## [2.89.4](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.89.3...@jobber/components@2.89.4) (2022-12-15)
 
 **Note:** Version bump only for package @jobber/components

package/dist/DataTable/index.js

@@ -42,7 +42,11 @@ function Body(_a) {
     }; }, [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())));
+            return (React__default["default"].createElement("td", { key: cell.id, style: {
+                    width: cell.column.getSize(),
+                    minWidth: cell.column.columnDef.minSize,
+                    maxWidth: cell.column.columnDef.maxSize,
+                } }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())));
         })));
     })));
 }
@@ -135,7 +139,11 @@ function Header(_a) {
                 ? classnames__default["default"](styles$2.sortableColumn, (_a = {},
                     _a[styles$2.pinFirstHeaderSortable] = !!onRowClick,
                     _a))
-                : "", onClick: sorting ? header.column.getToggleSortingHandler() : undefined }, header.isPlaceholder ? null : (React__default["default"].createElement("div", null,
+                : "", onClick: sorting ? header.column.getToggleSortingHandler() : undefined, style: {
+                width: header.getSize(),
+                minWidth: header.column.columnDef.minSize,
+                maxWidth: header.column.columnDef.maxSize,
+            } }, header.isPlaceholder ? null : (React__default["default"].createElement("div", null,
             reactTable.flexRender(header.column.columnDef.header, header.getContext()),
             {
                 asc: React__default["default"].createElement(Icon.Icon, { name: "longArrowUp", color: "green" }),
@@ -150,7 +158,11 @@ styleInject_es.styleInject(css);
 
 var DesktopView = function (_a) {
     var table = _a.table;
-    return (React__default["default"].createElement("tfoot", { "data-testid": "data-table-desktop-footer" }, table.getFooterGroups().map(function (footerGroup) { return (React__default["default"].createElement("tr", { key: footerGroup.id }, footerGroup.headers.map(function (header) { return (React__default["default"].createElement("th", { key: header.id }, reactTable.flexRender(header.column.columnDef.footer, header.getContext()))); }))); })));
+    return (React__default["default"].createElement("tfoot", { "data-testid": "data-table-desktop-footer" }, table.getFooterGroups().map(function (footerGroup) { return (React__default["default"].createElement("tr", { key: footerGroup.id }, footerGroup.headers.map(function (header) { return (React__default["default"].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()))); }))); })));
 };
 var HandheldView = function (_a) {
     var table = _a.table;

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

@@ -6,6 +6,12 @@ interface Data {
     sigil: string;
     isAlive: string;
 }
+interface RankingData {
+    name: string;
+    points: string;
+    chance: number;
+    power: string;
+}
 interface RoyaltyReportData {
     franchiseName: string;
     payment: string;
@@ -16,4 +22,42 @@ export declare const data: Data[];
 export declare const columns: ColumnDef<Data>[];
 export declare const royaltyReportColumns: ColumnDef<RoyaltyReportData>[];
 export declare const royaltyReportData: RoyaltyReportData[];
+export declare const columnSizeData: RankingData[];
+export declare const columSizeColumns: ({
+    id: string;
+    accessorKey: string;
+    header: string;
+    footer: string;
+    enableResizing: boolean;
+    cell: (info: {
+        getValue: () => unknown;
+    }) => unknown;
+    size: number;
+    minSize: number;
+    maxSize: number;
+} | {
+    id: string;
+    accessorKey: string;
+    header: string;
+    footer: string;
+    cell: (info: {
+        getValue: () => unknown;
+    }) => unknown;
+    size: number;
+    minSize: number;
+    maxSize: number;
+    enableResizing?: undefined;
+} | {
+    id: string;
+    accessorKey: string;
+    header: string;
+    cell: (info: {
+        getValue: () => unknown;
+    }) => unknown;
+    size: number;
+    minSize: number;
+    maxSize: number;
+    footer?: undefined;
+    enableResizing?: undefined;
+})[];
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "2.89.4",
+  "version": "2.90.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -85,5 +85,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "94605185b21389584355c34999a908de8f5c0432"
+  "gitHead": "910f81e98c045ae31f6a905ef0e7ebc657892d85"
 }