@paubox/ui 0.8.4 → 0.8.6

package/index.esm.js

@@ -31665,11 +31665,20 @@ var TableHeader = function(param) {
         children: table.getHeaderGroups().map(function(headerGroup) {
             return /*#__PURE__*/ jsx("tr", {
                 children: headerGroup.headers.map(function(header) {
+                    var _header_column;
+                    var actionHeaders = [
+                        'row-select',
+                        'context'
+                    ];
+                    var columnDef = header === null || header === void 0 ? void 0 : (_header_column = header.column) === null || _header_column === void 0 ? void 0 : _header_column.columnDef;
+                    var autoWidth = !!columnDef.autoWidth;
                     return /*#__PURE__*/ jsxs(Th, {
                         variant: "paragraph200Semibold",
                         as: "th",
                         style: {
-                            width: "".concat(header.column.getSize(), "px"),
+                            width: columnDef.width && !autoWidth ? "".concat(columnDef.width, "px") : "".concat(!autoWidth ? "".concat(header.getSize(), "px") : 'auto'),
+                            minWidth: columnDef.minSize && !autoWidth ? "".concat(columnDef.minSize, "px") : "auto",
+                            maxWidth: columnDef.maxSize && !autoWidth ? "".concat(columnDef.maxSize, "px") : 'auto',
                             padding: dense ? "".concat(spacing(1), "px ").concat(spacing(header.id === 'row-select' ? 1 : 1.5), "px") : "".concat(spacing(1.5), "px ").concat(spacing(header.id === 'row-select' ? 1 : 1.5), "px")
                         },
                         children: [
@@ -31677,6 +31686,7 @@ var TableHeader = function(param) {
                                 role: header.column.getCanSort() ? 'button' : undefined,
                                 onClick: !disableControls ? header.column.getToggleSortingHandler() : undefined,
                                 style: {
+                                    width: (actionHeaders === null || actionHeaders === void 0 ? void 0 : actionHeaders.includes(header === null || header === void 0 ? void 0 : header.id)) ? "".concat(header.getSize(), "px") : '100%',
                                     cursor: header.column.getCanSort() ? 'pointer' : 'default'
                                 },
                                 children: [
@@ -31697,7 +31707,7 @@ var TableHeader = function(param) {
                                 children: /*#__PURE__*/ jsx(ResizeHandle, {
                                     onMouseDown: header.getResizeHandler(),
                                     onTouchStart: header.getResizeHandler(),
-                                    className: "pbui-table-resize-handle",
+                                    className: !autoWidth ? 'pbui-table-resize-handle' : '',
                                     onClick: function(e) {
                                         e.stopPropagation();
                                         e.preventDefault();
@@ -31996,7 +32006,7 @@ function _templateObject$1() {
 }
 function _templateObject1$1() {
     var data = _tagged_template_literal$1([
-        "\n  position: relative;\n  border-collapse: collapse;\n  flex: 1;\n  table-layout: fixed;\n  min-height: 0;\n  width: 100%;\n  overflow-x: auto;\n"
+        "\n  position: relative;\n  border-collapse: collapse;\n  table-layout: fixed;\n  min-height: 0;\n  width: 100%;\n  overflow-x: auto;\n"
     ]);
     _templateObject1$1 = function _templateObject() {
         return data;
@@ -32032,7 +32042,9 @@ var Table = function(param) {
         if (enableRowSelection) {
             cols.unshift({
                 id: 'row-select',
-                size: 30,
+                size: 32,
+                minSize: 32,
+                maxSize: 32,
                 header: function(param) {
                     var table = param.table;
                     return /*#__PURE__*/ jsx(Checkbox, {
@@ -32061,6 +32073,9 @@ var Table = function(param) {
         if (contextMenuActions === null || contextMenuActions === void 0 ? void 0 : contextMenuActions.length) {
             cols.push({
                 id: 'context',
+                size: 32,
+                minSize: 32,
+                maxSize: 32,
                 header: '',
                 cell: function(param) {
                     var row = param.row;
@@ -32071,7 +32086,6 @@ var Table = function(param) {
                         contextMenuActions: contextMenuActions
                     });
                 },
-                size: 20,
                 enableResizing: false
             });
         }
@@ -32104,9 +32118,9 @@ var Table = function(param) {
         columns: allColumns,
         getRowId: getRowId,
         defaultColumn: {
-            minSize: 20,
-            maxSize: 1000,
-            size: 20
+            minSize: 100,
+            maxSize: 500,
+            size: 200
         },
         state: {
             pagination: {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@paubox/ui",
   "author": "Paubox, Inc.",
   "description": "Paubox Component Library",
-  "version": "0.8.4",
+  "version": "0.8.6",
   "type": "module",
   "private": false,
   "publishConfig": {

package/src/lib/Table/Table.d.ts

@@ -18,6 +18,7 @@ export type TableColumn<T> = ColumnDef<T> & {
     width?: number;
     sortable?: boolean;
     getter?: () => unknown;
+    autoWidth?: boolean;
 };
 export interface RowSelectState {
     [x: string]: boolean;