UI: Table - add option to resize columns width

Author: sofa-tata

dist/cjs/index.js

@@ -91,7 +91,9 @@ interface TableProps<Data extends Record<string, unknown>> {
     groupBy?: string[];
     hasCustomDateFormat?: boolean;
     customDateFormat?: string;
+    hasResizableColumns?: boolean;
+    hasEmptyActionsCell?: boolean;
 }
-declare function Table<Values extends Record<string, unknown>>({ columns, data, rowActions, tableActions, title, defaultSort, globalFilter, defaultGlobalFilter, checkRowSelected, checkRowHighlighted, getRowId, addFilterToUrl, RowSubComponent, listenerPrefix, onRowClick, miniTable, filterCategory, fixedPageSize, disableActionsPortal, maxRows, emptyMessage, colPropForShowColumns, manualPagination, itemsAmount, canExpandAll, loading, onFiltersChanged, defaultDescendingSort, customRowActions, manualFilters, extraClasses, initialFilters: initialUserFilters, groupBy, hasCustomDateFormat, customDateFormat }: TableProps<Values>): JSX.Element;
+declare function Table<Values extends Record<string, unknown>>({ columns, data, rowActions, tableActions, title, defaultSort, globalFilter, defaultGlobalFilter, checkRowSelected, checkRowHighlighted, getRowId, addFilterToUrl, RowSubComponent, listenerPrefix, onRowClick, miniTable, filterCategory, fixedPageSize, disableActionsPortal, maxRows, emptyMessage, colPropForShowColumns, manualPagination, itemsAmount, canExpandAll, loading, onFiltersChanged, defaultDescendingSort, customRowActions, manualFilters, extraClasses, initialFilters: initialUserFilters, groupBy, hasCustomDateFormat, customDateFormat, hasResizableColumns, hasEmptyActionsCell }: TableProps<Values>): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Table>;
 export default _default;

dist/cjs/index.js.map

@@ -4,6 +4,8 @@ export declare const TAG_SEPARATOR = ",";
 export declare const SAVED_FILTERS = "saved_filters";
 export declare const EXPLICITLY_REMOVED_FILTERS = "explicitly_removed_filters";
 export declare const SAVED_HIDDEN = "saved_hidden";
+export declare const SAVED_RESIZED = "saved_resized";
+export declare const SAVED_RESIZING_ENABLED = "saved_resizing_enabled";
 export declare const FILTER_CHANGE_LISTENER = "table-filters-change";
 export declare const FILTER_LISTENER = "table-filters";
 export declare const GENERAL_ERROR = "Something went wrong. Please refresh the page and try again.";

dist/cjs/types/components/Table/Table.d.ts

@@ -1,8 +1,17 @@
+interface ColumnResizing {
+    startX?: number | undefined;
+    columnWidth: number;
+    headerIdWidths: Record<string, number>;
+    columnWidths: any;
+    isResizingColumn?: string | undefined;
+}
 declare const localStorageService: {
     setItem(key: string, item: string | boolean): void;
     getItem(key: string): string | null;
     removeItem(key: string): void;
     updateFilters(key: string, value: any): void;
     updateHidden(key: string, value: any): void;
+    updateResized(category: string, resizing: ColumnResizing): void;
+    updateResizedEnabled(category: string, isResizedEnabled: boolean): void;
 };
 export default localStorageService;

dist/cjs/types/consts.d.ts

@@ -28,3 +28,5 @@ export { ReactComponent as ThinArrow } from './079-arrow-12.svg';
 export { ReactComponent as User } from './017-user-16.svg';
 export { ReactComponent as Weka } from './043-weka-16.svg';
 export { ReactComponent as CheckMark } from './016-checkmark-10.svg';
+export { ReactComponent as ColumnResize } from './188-column-resize-enable-16.svg';
+export { ReactComponent as ColumnResizeReset } from './189-column-resize-reset-16.svg';

dist/cjs/types/localStorageService.d.ts

@@ -91,7 +91,9 @@ interface TableProps<Data extends Record<string, unknown>> {
     groupBy?: string[];
     hasCustomDateFormat?: boolean;
     customDateFormat?: string;
+    hasResizableColumns?: boolean;
+    hasEmptyActionsCell?: boolean;
 }
-declare function Table<Values extends Record<string, unknown>>({ columns, data, rowActions, tableActions, title, defaultSort, globalFilter, defaultGlobalFilter, checkRowSelected, checkRowHighlighted, getRowId, addFilterToUrl, RowSubComponent, listenerPrefix, onRowClick, miniTable, filterCategory, fixedPageSize, disableActionsPortal, maxRows, emptyMessage, colPropForShowColumns, manualPagination, itemsAmount, canExpandAll, loading, onFiltersChanged, defaultDescendingSort, customRowActions, manualFilters, extraClasses, initialFilters: initialUserFilters, groupBy, hasCustomDateFormat, customDateFormat }: TableProps<Values>): JSX.Element;
+declare function Table<Values extends Record<string, unknown>>({ columns, data, rowActions, tableActions, title, defaultSort, globalFilter, defaultGlobalFilter, checkRowSelected, checkRowHighlighted, getRowId, addFilterToUrl, RowSubComponent, listenerPrefix, onRowClick, miniTable, filterCategory, fixedPageSize, disableActionsPortal, maxRows, emptyMessage, colPropForShowColumns, manualPagination, itemsAmount, canExpandAll, loading, onFiltersChanged, defaultDescendingSort, customRowActions, manualFilters, extraClasses, initialFilters: initialUserFilters, groupBy, hasCustomDateFormat, customDateFormat, hasResizableColumns, hasEmptyActionsCell }: TableProps<Values>): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Table>;
 export default _default;

dist/cjs/types/svgs/index.d.ts

@@ -4,6 +4,8 @@ export declare const TAG_SEPARATOR = ",";
 export declare const SAVED_FILTERS = "saved_filters";
 export declare const EXPLICITLY_REMOVED_FILTERS = "explicitly_removed_filters";
 export declare const SAVED_HIDDEN = "saved_hidden";
+export declare const SAVED_RESIZED = "saved_resized";
+export declare const SAVED_RESIZING_ENABLED = "saved_resizing_enabled";
 export declare const FILTER_CHANGE_LISTENER = "table-filters-change";
 export declare const FILTER_LISTENER = "table-filters";
 export declare const GENERAL_ERROR = "Something went wrong. Please refresh the page and try again.";