@qoretechnologies/reqore 0.34.13 → 0.35.0

package/dist/components/Table/helpers.d.ts

@@ -1,4 +1,7 @@
-import { IReqoreTableSort } from '.';
+import { IReqoreTableColumn, IReqoreTableSort } from '.';
+import { TSizes } from '../../constants/sizes';
+import { IReqoreIconName } from '../../types/icons';
+import { IReqorePanelAction } from '../Panel';
 export declare const flipSortDirection: (direction: 'asc' | 'desc') => 'asc' | 'desc';
 export declare const fixSort: (sort?: IReqoreTableSort) => {
     direction: "desc" | "asc";
@@ -6,4 +9,39 @@ export declare const fixSort: (sort?: IReqoreTableSort) => {
     thenBy?: string;
 };
 export declare const sortTableData: (data: any[], sort: IReqoreTableSort) => any[];
+export declare const updateColumnData: (columns: IReqoreTableColumn[], columnId: string, key: keyof IReqoreTableColumn, value: any) => IReqoreTableColumn[];
+export declare const sizeToZoom: {
+    tiny: number;
+    small: number;
+    normal: number;
+    big: number;
+    huge: number;
+};
+export declare const zoomToSize: {
+    0: string;
+    0.5: string;
+    1: string;
+    1.5: string;
+    2: string;
+};
+export declare const zoomToWidth: {
+    0: string;
+    0.5: string;
+    1: string;
+    1.5: string;
+    2: string;
+};
+export declare const zoomToLabel: {
+    0: string;
+    0.5: string;
+    1: string;
+    1.5: string;
+    2: string;
+};
+export declare const getZoomActions: (type: string, zoom: number, setter: (zoom: number) => void) => IReqorePanelAction[];
+export declare const getColumnsCount: (columns: IReqoreTableColumn[]) => number;
+export declare const hasHiddenColumns: (columns: IReqoreTableColumn[]) => boolean;
+export declare const getOnlyShownColumns: (columns: IReqoreTableColumn[]) => IReqoreTableColumn[];
+export declare const prepareColumns: (columns: IReqoreTableColumn[], size?: TSizes) => IReqoreTableColumn[];
+export declare const calculateMinimumCellWidth: (currentWidth?: number, size?: TSizes, icon?: IReqoreIconName, sortable?: boolean, filterable?: boolean, hideable?: boolean, resizable?: boolean) => number;
 //# sourceMappingURL=helpers.d.ts.map

package/dist/components/Table/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/components/Table/helpers.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,GAAG,CAAC;AAErC,eAAO,MAAM,iBAAiB,cAAe,KAAK,GAAG,MAAM,KAAG,KAAK,GAAG,MAChC,CAAC;AAEvC,eAAO,MAAM,OAAO,UAAW,gBAAgB;;;;CAE9C,CAAC;AAEF,eAAO,MAAM,aAAa,SAAU,GAAG,EAAE,QAAQ,gBAAgB,UAchE,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/components/Table/helpers.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,GAAG,CAAC;AACzD,OAAO,EAA8B,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAE9C,eAAO,MAAM,iBAAiB,cAAe,KAAK,GAAG,MAAM,KAAG,KAAK,GAAG,MAChC,CAAC;AAEvC,eAAO,MAAM,OAAO,UAAW,gBAAgB;;;;CAE9C,CAAC;AAEF,eAAO,MAAM,aAAa,SAAU,GAAG,EAAE,QAAQ,gBAAgB,UAchE,CAAC;AAEF,eAAO,MAAM,gBAAgB,YAClB,kBAAkB,EAAE,YACnB,MAAM,OACX,MAAM,kBAAkB,SACtB,GAAG,KACT,kBAAkB,EAoBpB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;CAMvB,CAAC;AAGF,eAAO,MAAM,WAAW;;;;;;CAMvB,CAAC;AAEF,eAAO,MAAM,cAAc,SACnB,MAAM,QACN,MAAM,iBACG,MAAM,KAAK,IAAI,KAC7B,kBAAkB,EA6BpB,CAAC;AAEF,eAAO,MAAM,eAAe,YAAa,kBAAkB,EAAE,KAAG,MAY/D,CAAC;AAEF,eAAO,MAAM,gBAAgB,YAAa,kBAAkB,EAAE,KAAG,OAQhE,CAAC;AAEF,eAAO,MAAM,mBAAmB,YAAa,kBAAkB,EAAE,KAAG,kBAAkB,EAwBrF,CAAC;AAEF,eAAO,MAAM,cAAc,YAChB,kBAAkB,EAAE,SACvB,MAAM,KACX,kBAAkB,EAyBpB,CAAC;AAEF,eAAO,MAAM,yBAAyB,kBACtB,MAAM,SACb,MAAM,SACN,eAAe,aACX,OAAO,eACL,OAAO,aACT,OAAO,cACN,OAAO,KAClB,MAgBF,CAAC"}

package/dist/components/Table/helpers.js

@@ -20,8 +20,10 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 exports.__esModule = true;
-exports.sortTableData = exports.fixSort = exports.flipSortDirection = void 0;
+exports.calculateMinimumCellWidth = exports.prepareColumns = exports.getOnlyShownColumns = exports.hasHiddenColumns = exports.getColumnsCount = exports.getZoomActions = exports.zoomToLabel = exports.zoomToWidth = exports.zoomToSize = exports.sizeToZoom = exports.updateColumnData = exports.sortTableData = exports.fixSort = exports.flipSortDirection = void 0;
+var lodash_1 = require("lodash");
 var thenby_1 = require("thenby");
+var sizes_1 = require("../../constants/sizes");
 var flipSortDirection = function (direction) {
     return direction === 'asc' ? 'desc' : 'asc';
 };
@@ -41,4 +43,146 @@ var sortTableData = function (data, sort) {
     return __spreadArray([], data, true).sort((0, thenby_1.firstBy)(by, { ignoreCase: true, direction: direction }));
 };
 exports.sortTableData = sortTableData;
+var updateColumnData = function (columns, columnId, key, value) {
+    var newColumns = columns.map(function (column) {
+        var _a;
+        var _b;
+        if (column.dataId === columnId) {
+            return __assign(__assign({}, column), (_a = {}, _a[key] = value, _a));
+        }
+        if ((_b = column.header) === null || _b === void 0 ? void 0 : _b.columns) {
+            return __assign(__assign({}, column), { header: __assign(__assign({}, column.header), { columns: (0, exports.updateColumnData)(column.header.columns, columnId, key, value) }) });
+        }
+        return column;
+    });
+    return newColumns;
+};
+exports.updateColumnData = updateColumnData;
+exports.sizeToZoom = {
+    tiny: 0,
+    small: 0.5,
+    normal: 1,
+    big: 1.5,
+    huge: 2
+};
+exports.zoomToSize = {
+    0: 'tiny',
+    0.5: 'small',
+    1: 'normal',
+    1.5: 'big',
+    2: 'huge'
+};
+exports.zoomToWidth = {
+    0: '200px',
+    0.5: '300px',
+    1: '400px',
+    1.5: '500px',
+    2: '600px'
+};
+// This code converts a zoom level to a label.
+exports.zoomToLabel = {
+    0: '0.6x',
+    0.5: '0.8x',
+    1: '1x',
+    1.5: '1.2x',
+    2: '1.4x'
+};
+var getZoomActions = function (type, zoom, setter) { return [
+    {
+        icon: 'ZoomInLine',
+        tooltip: 'Zoom in',
+        disabled: zoom === 2,
+        className: "".concat(type, "-zoom-in"),
+        onClick: function () {
+            setter(zoom + 0.5);
+        }
+    },
+    {
+        icon: 'RestartLine',
+        label: exports.zoomToLabel[zoom],
+        tooltip: 'Reset zoom',
+        disabled: zoom === 1,
+        className: "".concat(type, "-zoom-reset"),
+        onClick: function () {
+            setter(1);
+        }
+    },
+    {
+        icon: 'ZoomOutLine',
+        tooltip: 'Zoom out',
+        disabled: zoom === 0,
+        className: "".concat(type, "-zoom-out"),
+        onClick: function () {
+            setter(zoom - 0.5);
+        }
+    },
+]; };
+exports.getZoomActions = getZoomActions;
+var getColumnsCount = function (columns) {
+    var count = 0;
+    columns.forEach(function (column) {
+        if (column.header.columns) {
+            count += (0, exports.getColumnsCount)(column.header.columns);
+        }
+        else {
+            count += 1;
+        }
+    });
+    return count;
+};
+exports.getColumnsCount = getColumnsCount;
+var hasHiddenColumns = function (columns) {
+    return columns.some(function (column) {
+        if (column.header.columns) {
+            return column.header.columns.some(function (subColumn) { return subColumn.show === false; });
+        }
+        return column.show === false;
+    });
+};
+exports.hasHiddenColumns = hasHiddenColumns;
+var getOnlyShownColumns = function (columns) {
+    return columns.reduce(function (newColumns, column) {
+        if (column.header.columns) {
+            var subColumns = (0, exports.getOnlyShownColumns)(column.header.columns);
+            if ((0, lodash_1.size)(subColumns)) {
+                return __spreadArray(__spreadArray([], newColumns, true), [
+                    __assign(__assign({}, column), { header: __assign(__assign({}, column.header), { columns: (0, exports.getOnlyShownColumns)(column.header.columns) }) }),
+                ], false);
+            }
+            return newColumns;
+        }
+        if (column.show !== false) {
+            return __spreadArray(__spreadArray([], newColumns, true), [column], false);
+        }
+        return newColumns;
+    }, []);
+};
+exports.getOnlyShownColumns = getOnlyShownColumns;
+var prepareColumns = function (columns, size) {
+    if (size === void 0) { size = 'normal'; }
+    // We need to set the width of each column
+    return columns.map(function (column) {
+        if (column.header.columns) {
+            return __assign(__assign({}, column), { header: __assign(__assign({}, column.header), { columns: (0, exports.prepareColumns)(column.header.columns) }) });
+        }
+        var newWidth = (0, exports.calculateMinimumCellWidth)(column.width || 50, size, column.header.icon, column.sortable, column.filterable, column.hideable, column.resizable);
+        return __assign(__assign({}, column), { width: newWidth });
+    });
+};
+exports.prepareColumns = prepareColumns;
+var calculateMinimumCellWidth = function (currentWidth, size, icon, sortable, filterable, hideable, resizable) {
+    if (currentWidth === void 0) { currentWidth = 50; }
+    var width = currentWidth;
+    if (icon) {
+        width += sizes_1.ICON_FROM_SIZE[size];
+    }
+    if (sortable) {
+        width += sizes_1.ICON_FROM_SIZE[size];
+    }
+    if (filterable || hideable || resizable) {
+        width += sizes_1.SIZE_TO_PX[size];
+    }
+    return width;
+};
+exports.calculateMinimumCellWidth = calculateMinimumCellWidth;
 //# sourceMappingURL=helpers.js.map

package/dist/components/Table/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/components/Table/helpers.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,iCAAiC;AAG1B,IAAM,iBAAiB,GAAG,UAAC,SAAyB;IACzD,OAAA,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK;AAApC,CAAoC,CAAC;AAD1B,QAAA,iBAAiB,qBACS;AAEhC,IAAM,OAAO,GAAG,UAAC,IAAuB;IAC7C,6BAAY,CAAC,IAAI,IAAI,EAAE,CAAC,KAAE,SAAS,EAAE,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,KAAI,MAAM,IAAG;AACnE,CAAC,CAAC;AAFW,QAAA,OAAO,WAElB;AAEK,IAAM,aAAa,GAAG,UAAC,IAAW,EAAE,IAAsB;IACvD,IAAA,EAAE,GAAwB,IAAI,GAA5B,EAAE,MAAM,GAAgB,IAAI,OAApB,EAAE,SAAS,GAAK,IAAI,UAAT,CAAU;IAEvC,IAAI,CAAC,EAAE,EAAE;QACP,OAAO,IAAI,CAAC;KACb;IAED,IAAI,MAAM,EAAE;QACV,OAAO,kBAAI,IAAI,QAAE,IAAI,CACnB,IAAA,gBAAO,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,WAAA,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,WAAA,EAAE,CAAC,CAC7F,CAAC;KACH;IAED,OAAO,kBAAI,IAAI,QAAE,IAAI,CAAC,IAAA,gBAAO,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,WAAA,EAAE,CAAC,CAAC,CAAC;AACtE,CAAC,CAAC;AAdW,QAAA,aAAa,iBAcxB"}
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/components/Table/helpers.ts"],"names":[],"mappings":"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"}

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

@@ -1,33 +1,40 @@
 import React from 'react';
 import { TSizes } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
-import { IReqoreIntent, IWithReqoreCustomTheme, IWithReqoreFlat } from '../../types/global';
-import { IReqoreIconName } from '../../types/icons';
+import { IReqoreIntent, IReqoreTooltip } from '../../types/global';
+import { IReqoreButtonProps } from '../Button';
+import { IReqoreInputProps } from '../Input';
+import { IReqorePanelProps } from '../Panel';
+import { IReqoreCustomHeaderCellComponent } from './header';
+import { IReqoreTableHeaderCellProps } from './headerCell';
+import { IReqoreTableRowOptions } from './row';
 export type TReqoreTableColumnContent = React.FC<{
     [key: string]: any;
     _selectId?: string | number;
 }> | 'time-ago' | 'tag' | `tag:${TReqoreIntent}` | `tag:#${string}` | 'title' | `title:${TReqoreIntent}` | 'text' | `text:${TReqoreIntent}`;
 export interface IReqoreTableColumn extends IReqoreIntent {
     dataId: string;
-    header?: string | JSX.Element;
+    show?: boolean;
     grow?: 1 | 2 | 3 | 4;
     width?: number;
-    content?: TReqoreTableColumnContent;
-    props?: React.HTMLAttributes<HTMLDivElement>;
+    resizedWidth?: number;
     align?: 'center' | 'left' | 'right';
-    columns?: IReqoreTableColumn[];
+    resizable?: boolean;
     sortable?: boolean;
-    icon?: IReqoreIconName;
-    iconSize?: string;
-    tooltip?: string;
-    cellTooltip?: (data: {
-        [key: string]: any;
-        _selectId?: string | number;
-    }) => string | JSX.Element;
-    onCellClick?: (data: {
-        [key: string]: any;
-        _selectId?: string | number;
-    }) => void;
+    hideable?: boolean;
+    filterable?: boolean;
+    filterPlaceholder?: string;
+    filter?: string | number;
+    header?: {
+        columns?: IReqoreTableColumn[];
+        component?: React.FC<IReqoreTableHeaderCellProps>;
+    } & IReqoreButtonProps;
+    cell?: {
+        onClick?: (cellValue: any) => void;
+        tooltip?: (cellValue: any) => string | IReqoreTooltip;
+        content?: TReqoreTableColumnContent;
+        intent?: TReqoreIntent;
+    };
 }
 export interface IReqoreTableRowData {
     [key: string]: any;
@@ -37,24 +44,31 @@ export interface IReqoreTableRowData {
 }
 export type IReqoreTableRowClick = (data: IReqoreTableRowData) => void;
 export type IReqoreTableData = IReqoreTableRowData[];
-export interface IReqoreTableProps extends React.HTMLAttributes<HTMLDivElement>, IReqoreIntent, IWithReqoreFlat, IWithReqoreCustomTheme {
+export interface IReqoreTableProps extends IReqorePanelProps {
     columns: IReqoreTableColumn[];
     data?: IReqoreTableData;
-    className?: string;
     width?: number;
     height?: number;
+    wrapperSize?: TSizes;
     sort?: IReqoreTableSort;
-    striped?: boolean;
+    onSortChange?: (sort?: IReqoreTableSort) => void;
+    filterable?: boolean;
+    filterProps?: (data: IReqoreTableData) => IReqoreInputProps;
+    filter?: string;
+    onFilterChange?: (query: string) => void;
+    zoomable?: boolean;
+    defaultZoom?: number;
     selectable?: boolean;
     selected?: string[];
     selectedRowIntent?: TReqoreIntent;
-    onSortChange?: (sort?: IReqoreTableSort) => void;
     onSelectedChange?: (selected?: any[]) => void;
     selectToggleTooltip?: string;
+    striped?: boolean;
+    emptyMessage?: string;
     onRowClick?: IReqoreTableRowClick;
-    rounded?: boolean;
-    size?: TSizes;
-    fill?: boolean;
+    headerCellComponent?: IReqoreCustomHeaderCellComponent;
+    rowComponent?: IReqoreTableRowOptions['rowComponent'];
+    bodyCellComponent?: IReqoreTableRowOptions['cellComponent'];
 }
 export interface IReqoreTableStyle {
     theme: IReqoreTheme;
@@ -70,6 +84,6 @@ export interface IReqoreTableSort {
     thenBy?: string;
     direction?: 'asc' | 'desc';
 }
-declare const ReqoreTable: ({ className, height, width, columns, data, sort, onSortChange, selectable, selected, onSelectedChange, selectToggleTooltip, customTheme, rounded, onRowClick, striped, selectedRowIntent, size, intent, fill, ...rest }: IReqoreTableProps) => JSX.Element;
+declare const ReqoreTable: ({ className, height, width, columns, data, sort, onSortChange, selectable, selected, onSelectedChange, selectToggleTooltip, customTheme, onRowClick, striped, selectedRowIntent, size, wrapperSize, intent, fill, filterable, zoomable, filter, actions, onFilterChange, filterProps, emptyMessage, headerCellComponent, rowComponent, bodyCellComponent, ...rest }: IReqoreTableProps) => JSX.Element;
 export default ReqoreTable;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Table/index.js

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -14,29 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -66,36 +39,63 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var lodash_1 = require("lodash");
 var react_1 = require("react");
 var react_use_1 = require("react-use");
-var styled_components_1 = __importStar(require("styled-components"));
+var __1 = require("../..");
 var sizes_1 = require("../../constants/sizes");
-var ThemeProvider_1 = __importDefault(require("../../containers/ThemeProvider"));
-var colors_1 = require("../../helpers/colors");
-var useTheme_1 = require("../../hooks/useTheme");
+var useQueryWithDelay_1 = require("../../hooks/useQueryWithDelay");
+var Input_1 = __importDefault(require("../Input"));
 var body_1 = __importDefault(require("./body"));
-var header_1 = __importStar(require("./header"));
-var headerCell_1 = require("./headerCell");
+var header_1 = __importDefault(require("./header"));
 var helpers_1 = require("./helpers");
-var StyledTableWrapper = styled_components_1["default"].div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
-    var theme = _a.theme, width = _a.width, rounded = _a.rounded, flat = _a.flat, fill = _a.fill;
-    return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: ", ";\n    height: ", ";\n\n    position: relative;\n    clear: both;\n    overflow: hidden;\n    z-index: 1;\n\n    display: flex;\n    flex-flow: column;\n\n    border-radius: ", ";\n\n    background-color: ", ";\n    color: ", ";\n\n    ", "\n  "], ["\n    width: ", ";\n    height: ", ";\n\n    position: relative;\n    clear: both;\n    overflow: hidden;\n    z-index: 1;\n\n    display: flex;\n    flex-flow: column;\n\n    border-radius: ", ";\n\n    background-color: ", ";\n    color: ", ";\n\n    ", "\n  "])), width ? "".concat(width, "px") : '100%', fill ? '100%' : 'auto', rounded ? '10px' : undefined, theme.main, (0, colors_1.getReadableColor)(theme, undefined, undefined, true), !flat && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      ", ", ", " {\n        ", "\n      }\n    "], ["\n      ", ", ", " {\n        ", "\n      }\n    "])), headerCell_1.StyledTableHeader, header_1.StyledColumnGroupHeader, function (_a) {
-        var theme = _a.theme;
-        return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          border-bottom: 1px solid ", ";\n        "], ["\n          border-bottom: 1px solid ", ";\n        "])), (0, colors_1.changeLightness)(theme.main, 0.07));
-    }));
-});
 var ReqoreTable = function (_a) {
-    var className = _a.className, _b = _a.height, height = _b === void 0 ? 300 : _b, width = _a.width, columns = _a.columns, _c = _a.data, data = _c === void 0 ? [] : _c, sort = _a.sort, onSortChange = _a.onSortChange, selectable = _a.selectable, selected = _a.selected, onSelectedChange = _a.onSelectedChange, selectToggleTooltip = _a.selectToggleTooltip, customTheme = _a.customTheme, rounded = _a.rounded, onRowClick = _a.onRowClick, striped = _a.striped, selectedRowIntent = _a.selectedRowIntent, size = _a.size, intent = _a.intent, fill = _a.fill, rest = __rest(_a, ["className", "height", "width", "columns", "data", "sort", "onSortChange", "selectable", "selected", "onSelectedChange", "selectToggleTooltip", "customTheme", "rounded", "onRowClick", "striped", "selectedRowIntent", "size", "intent", "fill"]);
-    var _d = (0, react_1.useState)(0), leftScroll = _d[0], setLeftScroll = _d[1];
-    var _e = (0, react_1.useState)(data || []), _data = _e[0], setData = _e[1];
-    var _f = (0, react_1.useState)((0, helpers_1.fixSort)(sort)), _sort = _f[0], setSort = _f[1];
-    var _g = (0, react_1.useState)([]), _selected = _g[0], setSelected = _g[1];
-    var _h = (0, react_1.useState)('none'), _selectedQuant = _h[0], setSelectedQuant = _h[1];
-    var _j = (0, react_use_1.useMeasure)(), wrapperRef = _j[0], sizes = _j[1];
-    var theme = (0, useTheme_1.useReqoreTheme)('main', customTheme, intent);
+    var className = _a.className, _b = _a.height, height = _b === void 0 ? 300 : _b, width = _a.width, columns = _a.columns, _c = _a.data, data = _c === void 0 ? [] : _c, sort = _a.sort, onSortChange = _a.onSortChange, selectable = _a.selectable, selected = _a.selected, onSelectedChange = _a.onSelectedChange, selectToggleTooltip = _a.selectToggleTooltip, customTheme = _a.customTheme, onRowClick = _a.onRowClick, striped = _a.striped, selectedRowIntent = _a.selectedRowIntent, _d = _a.size, size = _d === void 0 ? 'normal' : _d, _e = _a.wrapperSize, wrapperSize = _e === void 0 ? 'normal' : _e, intent = _a.intent, fill = _a.fill, filterable = _a.filterable, zoomable = _a.zoomable, filter = _a.filter, _f = _a.actions, actions = _f === void 0 ? [] : _f, onFilterChange = _a.onFilterChange, filterProps = _a.filterProps, _g = _a.emptyMessage, emptyMessage = _g === void 0 ? 'No data in this table, try changing your search query or filters' : _g, headerCellComponent = _a.headerCellComponent, rowComponent = _a.rowComponent, bodyCellComponent = _a.bodyCellComponent, rest = __rest(_a, ["className", "height", "width", "columns", "data", "sort", "onSortChange", "selectable", "selected", "onSelectedChange", "selectToggleTooltip", "customTheme", "onRowClick", "striped", "selectedRowIntent", "size", "wrapperSize", "intent", "fill", "filterable", "zoomable", "filter", "actions", "onFilterChange", "filterProps", "emptyMessage", "headerCellComponent", "rowComponent", "bodyCellComponent"]);
+    var _h = (0, react_1.useState)(0), leftScroll = _h[0], setLeftScroll = _h[1];
+    var _j = (0, react_1.useState)(data || []), _data = _j[0], setData = _j[1];
+    var _k = (0, react_1.useState)((0, helpers_1.fixSort)(sort)), _sort = _k[0], setSort = _k[1];
+    var _l = (0, react_1.useState)([]), _selected = _l[0], setSelected = _l[1];
+    var _m = (0, react_1.useState)('none'), _selectedQuant = _m[0], setSelectedQuant = _m[1];
+    var _o = (0, react_1.useState)((0, helpers_1.prepareColumns)(columns)), internalColumns = _o[0], setColumns = _o[1];
+    var _p = (0, react_1.useState)(helpers_1.sizeToZoom[size]), zoom = _p[0], setZoom = _p[1];
+    var _q = (0, react_use_1.useMeasure)(), wrapperRef = _q[0], sizes = _q[1];
+    var _r = (0, useQueryWithDelay_1.useQueryWithDelay)(filter, 300, onFilterChange), query = _r.query, preQuery = _r.preQuery, setQuery = _r.setQuery, setPreQuery = _r.setPreQuery;
+    var filters = (0, react_1.useMemo)(function () {
+        var getFilters = function (columnsToTransform) {
+            return columnsToTransform.reduce(function (filterObject, column) {
+                var _a;
+                var _b;
+                if ((_b = column.header) === null || _b === void 0 ? void 0 : _b.columns) {
+                    return __assign(__assign({}, filterObject), getFilters(column.header.columns));
+                }
+                if (column.filter) {
+                    return __assign(__assign({}, filterObject), (_a = {}, _a[column.dataId] = column.filter, _a));
+                }
+                return filterObject;
+            }, {});
+        };
+        return getFilters(internalColumns);
+    }, [internalColumns]);
+    var transformedData = (0, react_1.useMemo)(function () {
+        // Filter by global query
+        var filteredData = _data.filter(function (datum) {
+            return JSON.stringify(datum).toLowerCase().includes(query.toLowerCase());
+        });
+        // Filter by column filters
+        filteredData = filteredData.filter(function (datum) {
+            return Object.keys(filters).every(function (filterKey) {
+                var filterValue = filters[filterKey];
+                var datumValue = datum[filterKey];
+                return datumValue === null || datumValue === void 0 ? void 0 : datumValue.toString().toLowerCase().includes(filterValue.toString().toLowerCase());
+            });
+        });
+        return _sort ? (0, helpers_1.sortTableData)(filteredData, _sort) : filteredData;
+    }, [_data, _sort, query, filters]);
     (0, react_use_1.useUpdateEffect)(function () {
         if (onSortChange) {
             onSortChange(_sort);
         }
     }, [_sort]);
+    (0, react_use_1.useUpdateEffect)(function () {
+        setColumns((0, helpers_1.prepareColumns)(columns));
+    }, [columns]);
     (0, react_use_1.useUpdateEffect)(function () {
         setData(data);
     }, [data]);
@@ -108,7 +108,7 @@ var ReqoreTable = function (_a) {
         if (onSelectedChange) {
             onSelectedChange(_selected);
         }
-        var selectableData = _data.filter(function (datum) { var _a; return (_a = datum._selectId) !== null && _a !== void 0 ? _a : false; });
+        var selectableData = transformedData.filter(function (datum) { var _a; return (_a = datum._selectId) !== null && _a !== void 0 ? _a : false; });
         if ((0, lodash_1.size)(_selected)) {
             if ((0, lodash_1.size)(_selected) === (0, lodash_1.size)(selectableData)) {
                 setSelectedQuant('all');
@@ -147,7 +147,7 @@ var ReqoreTable = function (_a) {
         switch (_selectedQuant) {
             case 'none':
             case 'some': {
-                var selectableData = _data
+                var selectableData = transformedData
                     .filter(function (datum) { var _a; return (_a = datum._selectId) !== null && _a !== void 0 ? _a : false; })
                     .map(function (datum) { return datum._selectId; });
                 setSelected(selectableData);
@@ -159,8 +159,95 @@ var ReqoreTable = function (_a) {
             }
         }
     };
-    return ((0, jsx_runtime_1.jsx)(ThemeProvider_1["default"], __assign({ theme: theme }, { children: (0, jsx_runtime_1.jsxs)(StyledTableWrapper, __assign({}, rest, { fill: fill, className: "".concat(className || '', " reqore-table"), rounded: rounded, width: width, ref: wrapperRef }, { children: [(0, jsx_runtime_1.jsx)(header_1["default"], { columns: columns, leftScroll: leftScroll, onSortChange: handleSortChange, sortData: _sort, selectable: selectable, selectedQuant: _selectedQuant, onToggleSelectClick: handleToggleSelectClick, hasVerticalScroll: (0, lodash_1.size)(_data) * sizes_1.TABLE_SIZE_TO_PX[size] > height, selectToggleTooltip: selectToggleTooltip }), (0, jsx_runtime_1.jsx)(body_1["default"], { data: _sort ? (0, helpers_1.sortTableData)(_data, _sort) : _data, columns: columns, setLeftScroll: setLeftScroll, height: fill ? sizes.height : height, selectable: selectable, onSelectClick: handleSelectClick, onRowClick: onRowClick, selected: _selected, selectedRowIntent: selectedRowIntent, size: size, striped: striped, flat: rest.flat })] })) })));
+    var handleColumnsUpdate = (0, react_1.useCallback)(function (id, key, value) {
+        setColumns((0, helpers_1.updateColumnData)(internalColumns, id, key, value));
+    }, [internalColumns]);
+    var handlePreQueryChange = (0, react_1.useCallback)(function (event) {
+        setPreQuery(event.target.value);
+    }, []);
+    var columnsList = (0, react_1.useMemo)(function () {
+        var _columnsList = [
+            {
+                divider: true,
+                label: 'Show / hide columns'
+            },
+        ];
+        var addColumn = function (column) {
+            _columnsList.push({
+                label: typeof column.header.label === 'string' ? column.header.label : column.dataId,
+                selected: column.show !== false,
+                onClick: function () {
+                    return handleColumnsUpdate(column.dataId, 'show', column.show !== false ? false : true);
+                },
+                intent: column.show !== false ? 'info' : undefined
+            });
+        };
+        internalColumns.forEach(function (column) {
+            var _a, _b;
+            if ((_a = column.header) === null || _a === void 0 ? void 0 : _a.columns) {
+                (_b = column.header) === null || _b === void 0 ? void 0 : _b.columns.forEach(function (subColumn) {
+                    addColumn(subColumn);
+                });
+            }
+            else {
+                addColumn(column);
+            }
+        });
+        return _columnsList;
+    }, [internalColumns]);
+    var tableActions = (0, react_1.useMemo)(function () {
+        var finalActions = __spreadArray([], actions, true);
+        finalActions.push({
+            label: 'Columns',
+            icon: 'LayoutColumnLine',
+            className: 'reqore-table-columns-options',
+            badge: (0, helpers_1.getColumnsCount)((0, helpers_1.getOnlyShownColumns)(internalColumns)),
+            intent: (0, helpers_1.hasHiddenColumns)(internalColumns) ? 'info' : undefined,
+            multiSelect: true,
+            actions: columnsList
+        });
+        if (filterable) {
+            finalActions.push({
+                as: Input_1["default"],
+                props: __assign({ key: 'search', fixed: false, placeholder: "Search in ".concat((0, lodash_1.size)(transformedData), " items..."), onClearClick: function () {
+                        setQuery('');
+                        setPreQuery('');
+                    }, onChange: handlePreQueryChange, value: preQuery, icon: 'Search2Line', disabled: !query && !(0, lodash_1.size)(transformedData), minimal: false }, filterProps === null || filterProps === void 0 ? void 0 : filterProps(transformedData))
+            });
+        }
+        if (zoomable) {
+            finalActions.push({
+                fluid: false,
+                group: (0, helpers_1.getZoomActions)('reqore-table', zoom, setZoom)
+            });
+        }
+        return finalActions;
+    }, [
+        preQuery,
+        transformedData,
+        actions,
+        filterable,
+        filterProps,
+        internalColumns,
+        zoomable,
+        zoom,
+        columnsList,
+    ]);
+    var badge = (0, react_1.useMemo)(function () {
+        var badgeList = rest.label ? [(0, lodash_1.size)(transformedData)] : undefined;
+        if (rest.badge) {
+            if ((0, lodash_1.isArray)(rest.badge)) {
+                badgeList.push.apply(badgeList, rest.badge);
+            }
+            else {
+                badgeList.push(rest.badge);
+            }
+        }
+        return badgeList;
+    }, [transformedData, rest.badge]);
+    return ((0, jsx_runtime_1.jsxs)(__1.ReqorePanel, __assign({ transparent: true, flat: true, padded: false, contentStyle: { display: 'flex', flexFlow: 'column', overflow: 'hidden' } }, rest, { size: wrapperSize, actions: tableActions, fill: fill, className: "".concat(className || '', " reqore-table"), style: __assign({ width: width }, (rest.style || {})), getContentRef: wrapperRef, badge: badge }, { children: [(0, jsx_runtime_1.jsx)(header_1["default"], { size: helpers_1.zoomToSize[zoom], columns: internalColumns, leftScroll: leftScroll, onSortChange: handleSortChange, sortData: _sort, selectable: selectable, selectedQuant: _selectedQuant, onToggleSelectClick: handleToggleSelectClick, hasVerticalScroll: (0, lodash_1.size)(transformedData) * sizes_1.TABLE_SIZE_TO_PX[size] > height, selectToggleTooltip: selectToggleTooltip, onColumnsUpdate: handleColumnsUpdate, onFilterChange: function (dataId, value) {
+                    handleColumnsUpdate(dataId, 'filter', value);
+                }, component: headerCellComponent }), (0, lodash_1.size)(transformedData) === 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(__1.ReqoreVerticalSpacer, { height: 10 }), (0, jsx_runtime_1.jsx)(__1.ReqoreMessage, __assign({ flat: true, size: size, icon: 'Search2Line' }, { children: emptyMessage }))] })) : ((0, jsx_runtime_1.jsx)(body_1["default"], { data: transformedData, columns: internalColumns, setLeftScroll: setLeftScroll, height: fill ? sizes.height : height, selectable: selectable, onSelectClick: handleSelectClick, onRowClick: onRowClick, selected: _selected, selectedRowIntent: selectedRowIntent, size: helpers_1.zoomToSize[zoom], striped: striped, flat: rest.flat, rowComponent: rowComponent, cellComponent: bodyCellComponent }))] })));
 };
 exports["default"] = ReqoreTable;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 //# sourceMappingURL=index.js.map