@vrobots/storybook 0.2.0 → 0.2.1

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vrobots/storybook",
     "private": false,
-    "version": "0.2.0",
+    "version": "0.2.1",
     "type": "module",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
@@ -21,8 +21,10 @@
         "@chakra-ui/react": "^3.32.0",
         "@emotion/react": "^11.14.0",
         "@storybook/addon-themes": "^10.2.16",
+        "@tanstack/react-table": "^8.21.3",
         "axios": "^1.13.4",
         "motion": "^12.34.0",
+        "next": "^16.2.4",
         "next-themes": "^0.4.6",
         "owasp-password-strength-test": "^1.3.0",
         "react": "^19.2.0",
@@ -40,7 +42,6 @@
         "@storybook/addon-docs": "^10.2.16",
         "@storybook/addon-vitest": "^10.2.16",
         "@storybook/react-vite": "^10.2.16",
-        "@storybook/test": "^8.6.15",
         "@types/node": "^24.10.1",
         "@types/react": "^19.2.5",
         "@types/react-dom": "^19.2.3",

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

@@ -19,3 +19,7 @@ export * from './form/Login';
 export * from './form/SecondFactorAuth';
 export * from './form/FileUploader';
 export { default as Form } from './form';
+export { default as DataTable } from './table/DataTable';
+export * from './table/types';
+export * from './table/components/ColumnText';
+export { default as useDataTable } from './table/hooks/useDataTable';

package/dist/src/components/index.js

@@ -19,3 +19,7 @@ export * from './form/Login';
 export * from './form/SecondFactorAuth';
 export * from './form/FileUploader';
 export { default as Form } from './form';
+export { default as DataTable } from './table/DataTable';
+export * from './table/types';
+export * from './table/components/ColumnText';
+export { default as useDataTable } from './table/hooks/useDataTable';

package/dist/src/components/table/DataTable.d.ts

@@ -0,0 +1,16 @@
+import { IColumnFilter, TFilterChange } from "./types";
+export interface IDataTableProps {
+    data: any[];
+    total: number;
+    pageNumber: number;
+    pagesTotal: number;
+    pageSize: number;
+    setPageNumber: React.Dispatch<React.SetStateAction<number>>;
+    setPageSize: React.Dispatch<React.SetStateAction<number>>;
+    columns: any[];
+    filters?: IColumnFilter[];
+    onRowClick?: (row: any) => void;
+    onFilterChange?: TFilterChange;
+}
+declare const DataTable: React.FC<IDataTableProps>;
+export default DataTable;

package/dist/src/components/table/DataTable.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Card, Table } from "@chakra-ui/react";
+import { useColorMode } from "../ui/color-mode";
+import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { useEffect, useState } from "react";
+import TableFilter from "./components/TableFilter";
+import { Pagination } from "./components/Pagination";
+const Pager = ({ border, pagesTotal, pageNumber, setPageNumber, pageSize, setPageSize }) => (_jsx(Box, { p: 2, pt: 6, border: border, borderBottom: 'none', children: _jsx(Pagination, { pagesTotal: pagesTotal, pageNumber: pageNumber, setPageNumber: setPageNumber, pageSize: pageSize, setPageSize: setPageSize, showPageSelector: true }) }));
+const DataTable = ({ data: defaultData, total, pageNumber, pagesTotal, setPageNumber, setPageSize, pageSize, columns, filters = [], onRowClick, onFilterChange, }) => {
+    const [data, setData] = useState(() => [...defaultData]);
+    const { colorMode } = useColorMode();
+    const columnResizeMode = 'onChange';
+    const columnResizeDirection = 'ltr';
+    const isDarkMode = colorMode === 'dark';
+    const border = `1px solid ${isDarkMode ? '#333333' : '#E2E8F0'} !important`;
+    const table = useReactTable({
+        data,
+        columns,
+        columnResizeMode,
+        columnResizeDirection,
+        getCoreRowModel: getCoreRowModel(),
+    });
+    const pagerProps = { border, pagesTotal, pageNumber, setPageNumber, pageSize, setPageSize };
+    useEffect(() => {
+        setData([...defaultData]);
+    }, [defaultData, setData]);
+    return (_jsx(Card.Root, { children: _jsxs(Card.Body, { p: 0, children: [_jsx(Pager, { ...pagerProps }), _jsx(Box, { overflow: 'auto', children: _jsxs(Table.Root, { width: '100%', children: [_jsx(Table.Header, { children: table.getHeaderGroups().map(headerGroup => (_jsx(Table.Row, { children: headerGroup.headers.map(header => (_jsxs(Table.ColumnHeader, { borderLeft: border, borderRight: border, children: [header.isPlaceholder
+                                                ? null
+                                                : flexRender(header.column.columnDef.header, header.getContext()), filters.find((filter) => filter.id === header.id) && !!onFilterChange ? (_jsx(TableFilter, { filter: filters.find(filter => filter.id === header.id), onFilterChange: onFilterChange })) : null] }, header.id))) }, headerGroup.id))) }), _jsxs(Table.Body, { children: [total === 0 ? (_jsx(Table.Row, { children: _jsx(Table.Cell, { colSpan: columns.length, textAlign: 'center', children: "No records found" }) })) : null, table.getRowModel().rows.map((row, i) => {
+                                        const isEven = i % 2 === 0;
+                                        const colorEven = isDarkMode ? 'gray.700' : 'gray.50';
+                                        const colorOdd = isDarkMode ? 'gray.600' : 'white';
+                                        const backgroundColor = isEven ? colorEven : colorOdd;
+                                        return (_jsx(Table.Row, { background: backgroundColor, _hover: !!onRowClick ? {
+                                                cursor: 'pointer',
+                                                backgroundColor: 'rgba(107, 160, 252, 0.3) !important',
+                                            } : void 0, onClick: () => onRowClick && onRowClick(row.original), children: row.getVisibleCells().map(cell => (_jsx(Table.Cell, { border: border, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id));
+                                    })] }), _jsx(Table.Footer, { children: table.getFooterGroups().map(footerGroup => (_jsx(Table.Row, { children: footerGroup.headers.map(header => (_jsx(Table.ColumnHeader, { borderLeft: border, borderRight: border, children: header.isPlaceholder
+                                            ? null
+                                            : flexRender(header.column.columnDef.header, header.getContext()) }, header.id))) }, footerGroup.id))) })] }) }), _jsx(Pager, { ...pagerProps })] }) }));
+};
+export default DataTable;

package/dist/src/components/table/components/ColumnText.d.ts

@@ -0,0 +1,2 @@
+import { TextProps } from "@chakra-ui/react";
+export default function ColumnText(props: TextProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/table/components/ColumnText.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "@chakra-ui/react";
+export default function ColumnText(props) {
+    return (_jsx(Text, { wordBreak: 'break-word', whiteSpace: 'nowrap', truncate: true, ...props }));
+}

package/dist/src/components/table/components/PageSizeSelector.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface PageSizeSelectorProps {
+    sizes: number[];
+    selectedPageSize: number;
+    onSelect: (pageSize: number) => void;
+}
+export declare const PageSizeSelector: React.FC<PageSizeSelectorProps>;

package/dist/src/components/table/components/PageSizeSelector.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NativeSelect, HStack, Text } from '@chakra-ui/react';
+import * as React from 'react';
+export const PageSizeSelector = ({ sizes, selectedPageSize, onSelect, }) => {
+    const idKey = React.useId();
+    const handleSetPageSize = (e) => onSelect(Number(e.target.value));
+    return (_jsxs(HStack, { gap: "3", align: "center", children: [_jsx(Text, { fontSize: "sm", fontWeight: "normal", children: "Showing" }), _jsxs(NativeSelect.Root, { size: 'sm', maxW: '75px', children: [_jsx(NativeSelect.Field, { id: `page-size-selector-${idKey}`, value: selectedPageSize, onChange: handleSetPageSize, cursor: 'pointer', children: sizes.map((size, key) => (_jsx("option", { value: size, children: size }, `options-${size}-${key}`))) }), _jsx(NativeSelect.Indicator, {})] })] }));
+};

package/dist/src/components/table/components/Pagination.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export interface IPaginationProps {
+    pagesTotal: number;
+    pageNumber: number;
+    pageSize: number;
+    showPageSelector?: boolean;
+    setPageSize: React.Dispatch<React.SetStateAction<number>>;
+    setPageNumber: React.Dispatch<React.SetStateAction<number>>;
+}
+export declare const Pagination: React.FC<IPaginationProps>;

package/dist/src/components/table/components/Pagination.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { Flex, Button, Field, HStack, Text, Grid, GridItem, NumberInput } from '@chakra-ui/react';
+import { PAGE_SIZES } from '../constants';
+import { PageSizeSelector } from './PageSizeSelector';
+import { useBreakpoint } from '../../../hooks';
+const PAGE_LIMIT_MOBILE = 2;
+const PAGE_LIMIT = 4;
+const makeNavButton = (onChange, pageNumber) => function PageButton(page) {
+    return (_jsx(Button, { "aria-label": `page-${page}`, onClick: () => onChange(page.toString()), variant: page === pageNumber ? 'solid' : 'outline', size: 'sm', paddingLeft: '1px !important', paddingRight: '1px !important', marginRight: 1, children: page }, `nav-button-${page}`));
+};
+export const Pagination = ({ pagesTotal, pageNumber, pageSize, showPageSelector, setPageNumber, setPageSize }) => {
+    const [pageInput, setPageInput] = React.useState(pageNumber);
+    const [shouldDebounce, setShouldDebounce] = React.useState(false);
+    const pageInputRef = React.useRef(pageNumber);
+    const breakpoint = useBreakpoint() ?? 'base';
+    const isMobile = ['base', 'sm'].includes(breakpoint);
+    const limit = isMobile ? PAGE_LIMIT_MOBILE : PAGE_LIMIT;
+    const pages = [];
+    for (let i = 0; pagesTotal > i; i++) {
+        pages.push(i + 1);
+    }
+    const handlePages = (pages, limit, pageNumber) => pages.filter(page => {
+        const cp = pageNumber < 4 ? 3 : pageNumber;
+        const rangeA = cp - (limit / 2);
+        const rangeB = cp + (limit / 2);
+        return page >= rangeA && page <= rangeB;
+    });
+    const handleChangePageInput = (shouldDebounce) => (ivalue) => {
+        const value = Number(ivalue) > pagesTotal ? pagesTotal : Number(ivalue);
+        setShouldDebounce(shouldDebounce);
+        setPageInput(value);
+    };
+    React.useEffect(() => {
+        let timeout;
+        if ((pageInputRef.current !== pageInput) && !!pageInput) {
+            pageInputRef.current = pageInput;
+            setShouldDebounce(previousShouldDebounce => {
+                timeout = setTimeout(() => setPageNumber(pageInput), previousShouldDebounce ? 1000 : 0);
+                return false;
+            });
+        }
+        return () => clearTimeout(timeout);
+    }, [pageInput, setShouldDebounce, setPageNumber]);
+    return (_jsxs(Grid, { templateRows: {
+            sm: 'repeat(1, 1fr)',
+        }, templateColumns: {
+            sm: `repeat(1, 1fr)`,
+            md: `repeat(2, 1fr)`,
+        }, children: [showPageSelector ? (_jsx(_Fragment, { children: _jsx(GridItem, { mb: 4, children: _jsxs(Flex, { children: [_jsx(PageSizeSelector, { sizes: PAGE_SIZES, selectedPageSize: pageSize, onSelect: setPageSize }), _jsxs(Text, { fontSize: 'sm', fontWeight: 'normal', ml: 4, mt: 1, children: ["page ", _jsx("strong", { children: pageNumber.toString() }), " of ", _jsx("strong", { children: pagesTotal.toString() })] })] }) }) })) : _jsx(GridItem, { colSpan: 1 }), _jsx(GridItem, { children: _jsx(Field.Root, { children: _jsxs(HStack, { justifyContent: 'right', children: [handlePages(pages, limit, pageNumber).map(makeNavButton(handleChangePageInput(false), pageNumber)), _jsx(Field.Label, { htmlFor: 'pagination', style: { fontSize: 10 }, mt: 2, ml: 4, children: "goto page:" }), _jsxs(NumberInput.Root, { value: String(pageInput), size: 'sm', max: pagesTotal, min: 1, onValueChange: (details) => handleChangePageInput(true)(details.value), children: [_jsx(NumberInput.Input, { id: 'pagination', style: { width: 90 } }), _jsxs(NumberInput.Control, { children: [_jsx(NumberInput.IncrementTrigger, {}), _jsx(NumberInput.DecrementTrigger, {})] })] })] }) }) })] }));
+};

package/dist/src/components/table/components/TableFilter.d.ts

@@ -0,0 +1,6 @@
+import { IColumnFilter, TFilterChange } from "../types";
+export interface ITableFilterProps {
+    filter: IColumnFilter;
+    onFilterChange: TFilterChange;
+}
+export default function TableFilter({ filter, onFilterChange, }: ITableFilterProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/src/components/table/components/TableFilter.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import TableFilterInput from "./TableFilterInput";
+import { Field, IconButton, InputGroup } from "@chakra-ui/react";
+import TableFilterDatePicker from "./TableFilterDatePicker";
+import { FaX } from "react-icons/fa6";
+import { Tooltip } from "../../ui/tooltip";
+export default function TableFilter({ filter, onFilterChange, }) {
+    const handleChangeInput = (event) => {
+        const { value } = event.target;
+        onFilterChange({ ...filter, value });
+    };
+    const handleChangeDate = (date) => {
+        if (date) {
+            onFilterChange({ ...filter, value: new Date(date) });
+        }
+    };
+    const handleClearFilter = () => {
+        onFilterChange({ ...filter, value: undefined });
+    };
+    const ClearFilterButton = () => !!filter.value ? (_jsx(Tooltip, { content: `Clear filter`, positioning: { placement: 'bottom-end' }, showArrow: true, children: _jsx(IconButton, { "aria-label": `Clear filter ${filter.type}`, onClick: handleClearFilter, size: 'sm', variant: 'ghost', children: _jsx(FaX, {}) }) })) : null;
+    if (filter.type === 'string' || filter.type === 'number') {
+        return (_jsxs(Field.Root, { children: [_jsx(InputGroup, { endElement: _jsx(ClearFilterButton, {}), children: _jsx(TableFilterInput, { value: filter.value?.toString() || '', onChange: handleChangeInput }) }), _jsx(Field.HelperText, { color: 'gray.300', whiteSpace: 'nowrap', wordBreak: 'break-word', children: filter.helperText })] }));
+    }
+    if (filter.type === 'date') {
+        return (_jsxs(Field.Root, { children: [_jsx(InputGroup, { endElement: _jsx(ClearFilterButton, {}), children: _jsx(TableFilterDatePicker, { selected: filter.value, onChange: (date) => handleChangeDate(date) }) }), _jsx(Field.HelperText, { color: 'gray.300', whiteSpace: 'nowrap', wordBreak: 'break-word', children: filter.helperText })] }));
+    }
+    return null;
+}

package/dist/src/components/table/components/TableFilterDatePicker.d.ts

@@ -0,0 +1,5 @@
+export interface ITableFilterDatePickerProps {
+    selected?: Date | null;
+    onChange: (date: Date | null) => void;
+}
+export default function TableFilterDatePicker({ selected, onChange }: ITableFilterDatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/table/components/TableFilterDatePicker.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from "@chakra-ui/react";
+export default function TableFilterDatePicker({ selected, onChange }) {
+    const value = selected ? selected.toISOString().split('T')[0] : '';
+    const handleChange = (e) => {
+        const val = e.target.value;
+        onChange(val ? new Date(val) : null);
+    };
+    return (_jsx(Input, { type: "date", value: value, onChange: handleChange, width: '100%', mt: 2, size: 'md' }));
+}

package/dist/src/components/table/components/TableFilterInput.d.ts

@@ -0,0 +1,2 @@
+import { InputProps } from "@chakra-ui/react";
+export default function TableFilterInput(props: InputProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/table/components/TableFilterInput.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from "@chakra-ui/react";
+export default function TableFilterInput(props) {
+    return (_jsx(Input, { width: '100%', mt: 2, ...props }));
+}

package/dist/src/components/table/components/TableFilterSelect.d.ts

@@ -0,0 +1,2 @@
+import { type NativeSelectRootProps } from "@chakra-ui/react";
+export default function TableFilterSelect(props: NativeSelectRootProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/table/components/TableFilterSelect.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NativeSelect } from "@chakra-ui/react";
+export default function TableFilterSelect(props) {
+    return (_jsxs(NativeSelect.Root, { width: '100%', ...props, children: [_jsx(NativeSelect.Field, {}), _jsx(NativeSelect.Indicator, {})] }));
+}

package/dist/src/components/table/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const PAGE_FIRST_PAGE = 1;
+export declare const PAGE_SIZES: number[];

package/dist/src/components/table/constants.js

@@ -0,0 +1,2 @@
+export const PAGE_FIRST_PAGE = 1;
+export const PAGE_SIZES = [25, 50, 100, 150, 200, 250];

package/dist/src/components/table/hooks/useDataTable.d.ts

@@ -0,0 +1,24 @@
+import { IFilter } from "@vrobots/types";
+import { IColumnFilter } from "../types";
+export interface IUseDataTableArgs {
+    columnFilters: IColumnFilter[];
+    skip: number;
+    limit: number;
+    totalRecords: number;
+    sort?: {
+        [key: string]: 1 | -1;
+    };
+    baseFilter?: IFilter;
+    additionalFilters?: IFilter[];
+    shouldUseQuerystring?: boolean;
+}
+export default function useDataTable(options: IUseDataTableArgs): {
+    pageSize: number;
+    setPageSize: import("react").Dispatch<import("react").SetStateAction<number>>;
+    pageNumber: number;
+    pagesTotal: number;
+    setPageNumber: import("react").Dispatch<import("react").SetStateAction<number>>;
+    query: import("@vrobots/types").IQuery;
+    filters: IColumnFilter[];
+    onFilterChange: (filter: IColumnFilter) => void;
+};

package/dist/src/components/table/hooks/useDataTable.js

@@ -0,0 +1,14 @@
+import useTableFilters from "./useTableFilters";
+import usePagination from "./usePagination";
+import usePageSize from "./usePageSize";
+export default function useDataTable(options) {
+    const { columnFilters, skip, limit, totalRecords, sort, baseFilter, additionalFilters, shouldUseQuerystring, } = options;
+    const pageSize = usePageSize(limit);
+    const pagination = usePagination(skip, limit, totalRecords, shouldUseQuerystring);
+    const filters = useTableFilters(columnFilters, skip, pageSize.pageSize, pagination.pageNumber, sort, baseFilter, additionalFilters, shouldUseQuerystring);
+    return {
+        ...filters,
+        ...pagination,
+        ...pageSize,
+    };
+}

package/dist/src/components/table/hooks/usePageSize.d.ts

@@ -0,0 +1,4 @@
+export default function usePageSize(defaultLimit: number): {
+    pageSize: number;
+    setPageSize: import("react").Dispatch<import("react").SetStateAction<number>>;
+};

package/dist/src/components/table/hooks/usePageSize.js

@@ -0,0 +1,8 @@
+import { useState } from 'react';
+export default function usePageSize(defaultLimit) {
+    const [pageSize, setPageSize] = useState(defaultLimit);
+    return {
+        pageSize,
+        setPageSize,
+    };
+}

package/dist/src/components/table/hooks/usePagination.d.ts

@@ -0,0 +1,5 @@
+export default function usePagination(skip: number, limit: number, totalRecords: number, shouldUseQuerystring?: boolean): {
+    pageNumber: number;
+    pagesTotal: number;
+    setPageNumber: import("react").Dispatch<import("react").SetStateAction<number>>;
+};

package/dist/src/components/table/hooks/usePagination.js

@@ -0,0 +1,12 @@
+import { useState } from "react";
+import { PAGE_FIRST_PAGE } from "../constants";
+export default function usePagination(skip, limit, totalRecords, shouldUseQuerystring) {
+    const defaultPageNumber = !!limit ? (skip / limit) + 1 : PAGE_FIRST_PAGE;
+    const [pageNumber, setPageNumber] = useState(defaultPageNumber);
+    const pagesTotal = Math.ceil(totalRecords / limit);
+    return {
+        pageNumber,
+        pagesTotal,
+        setPageNumber,
+    };
+}

package/dist/src/components/table/hooks/useTableFilters.d.ts

@@ -0,0 +1,15 @@
+import { IColumnFilter, TColumnFilterType } from "../types";
+import { IFilter, IQuery } from "@vrobots/types";
+export interface ITableFilter {
+    [key: string]: {
+        type: TColumnFilterType;
+        value: string | number | Date;
+    };
+}
+export default function useTableFilters(columnFilters: IColumnFilter[], skip: number, limit: number, pageNumber: number, sort?: {
+    [key: string]: 1 | -1;
+}, baseFilter?: IFilter, additionalFilters?: IFilter[], shouldUseQuerystring?: boolean): {
+    query: IQuery;
+    filters: IColumnFilter[];
+    onFilterChange: (filter: IColumnFilter) => void;
+};

package/dist/src/components/table/hooks/useTableFilters.js

@@ -0,0 +1,118 @@
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useMemo, useRef, useState } from "react";
+export default function useTableFilters(columnFilters, skip, limit, pageNumber, sort, baseFilter, additionalFilters, shouldUseQuerystring) {
+    const [filters, setFilters] = useState(columnFilters);
+    const pathname = usePathname();
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const refPath = useRef('');
+    const query = useMemo(() => {
+        const coreFilters = filters.filter(filter => typeof filter.value !== 'undefined' && filter.value !== null && filter.value !== '');
+        const dateFilters = coreFilters
+            .filter(filter => filter.type === 'date')
+            .map((filter) => ({
+            logic: 'and',
+            column: filter.accessor,
+            operator: filter.operator,
+            dataType: filter.type,
+            value: new Date(filter?.value).getTime(),
+        }));
+        const nonDateFilters = coreFilters
+            .filter(filter => filter.type !== 'date')
+            .map((filter) => {
+            const filterParts = filter?.value?.toString().split(' ') || [];
+            if (filterParts.length === 1) {
+                return {
+                    logic: 'and',
+                    column: filter.accessor,
+                    operator: filter.operator,
+                    dataType: filter.type,
+                    value: filter?.value,
+                };
+            }
+            else {
+                return {
+                    logic: 'and',
+                    filters: filterParts.map((part) => ({
+                        logic: 'or',
+                        column: filter.accessor,
+                        operator: filter.operator,
+                        dataType: filter.type,
+                        value: part,
+                    })),
+                };
+            }
+        });
+        return {
+            limit,
+            skip: (pageNumber - 1) * limit,
+            filter: {
+                logic: 'and',
+                ...baseFilter,
+                filters: [
+                    ...dateFilters,
+                    ...nonDateFilters,
+                    ...additionalFilters || []
+                ],
+            },
+            sort,
+        };
+    }, [limit, pageNumber, filters, baseFilter, additionalFilters, sort]);
+    const onFilterChange = (filter) => {
+        setFilters((previousFilters) => ([
+            ...previousFilters.filter(f => f.accessor !== filter.accessor),
+            filter,
+        ]));
+    };
+    useEffect(() => {
+        const params = new URLSearchParams(searchParams.toString());
+        const incomingQuery = searchParams.get('query');
+        if (refPath.current === '' && !!incomingQuery) {
+            const query = JSON.parse(incomingQuery);
+            const filters = query?.filter?.filters || [];
+            const updatedFiltersPopulated = filters.map(filter => {
+                const isNestedFilter = Array.isArray(filter.filters);
+                const columnFilter = columnFilters.find(f => f.accessor === filter.column);
+                if (columnFilter && !isNestedFilter) {
+                    return {
+                        ...columnFilter,
+                        value: filter.value,
+                    };
+                }
+                if (isNestedFilter) {
+                    const nestedColumn = filter.filters?.[0]?.column;
+                    const nestedColumnFilter = columnFilters.find(f => f.accessor === nestedColumn);
+                    return {
+                        ...nestedColumnFilter,
+                        value: filter.filters?.map(f => f.value).join(' '),
+                    };
+                }
+                return;
+            })
+                .filter(filter => filter !== null);
+            const update = columnFilters.map(filter => {
+                const updatedFilter = updatedFiltersPopulated.find(f => f.accessor === filter.accessor);
+                if (updatedFilter) {
+                    return updatedFilter;
+                }
+                return filter;
+            });
+            if (update?.length) {
+                setFilters(update);
+            }
+        }
+        else {
+            params.set('query', JSON.stringify(query));
+        }
+        const path = `${pathname}?${params.toString()}`;
+        if (shouldUseQuerystring && refPath.current !== path) {
+            refPath.current = path;
+            router.push(path);
+        }
+    }, [filters, pathname, router, shouldUseQuerystring, searchParams, skip, limit, baseFilter, additionalFilters, sort, columnFilters, query]);
+    return {
+        query,
+        filters,
+        onFilterChange,
+    };
+}

package/dist/src/components/table/types.d.ts

@@ -0,0 +1,11 @@
+export type TFilterChange = (filter: IColumnFilter) => void;
+export type TColumnFilterType = 'date' | 'string' | 'number' | 'boolean';
+export type TColumnFilterOperation = '%' | '!%' | '^%' | '%^' | '=' | '!=' | '>' | '>=' | '<' | '<=' | 'null';
+export interface IColumnFilter {
+    id: string;
+    accessor: string;
+    type: TColumnFilterType;
+    operator: TColumnFilterOperation;
+    helperText?: string;
+    value?: string | number | Date;
+}

package/dist/src/components/table/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/stories/Breadcrumbs.stories.js

@@ -1,4 +1,4 @@
-import { expect, userEvent, within } from '@storybook/test';
+import { expect, userEvent, within } from 'storybook/test';
 import { Breadcrumbs } from '../components/Breadcrumbs';
 const onClick = (nav) => {
     console.log('Breadcrumb clicked:', nav);

package/dist/src/stories/DataTable.stories.d.ts

@@ -0,0 +1,26 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { IDataTableProps } from '../components/table/DataTable';
+declare const meta: {
+    title: string;
+    component: import("react").FC<IDataTableProps>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        data: never[];
+        total: number;
+        pageNumber: number;
+        pagesTotal: number;
+        pageSize: number;
+        setPageNumber: import("react").Dispatch<import("react").SetStateAction<number>>;
+        setPageSize: import("react").Dispatch<import("react").SetStateAction<number>>;
+        columns: never[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithRowClick: Story;
+export declare const EmptyState: Story;
+export declare const WithFilters: Story;

package/dist/src/stories/DataTable.stories.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import DataTable from '../components/table/DataTable';
+const noopSetPageNumber = () => undefined;
+const noopSetPageSize = () => undefined;
+const SAMPLE_DATA = [
+    { id: 'P-001', name: 'Alice Johnson', dob: '1985-03-12', provider: 'Dr. Smith', status: 'Active', balance: 125.0 },
+    { id: 'P-002', name: 'Bob Martinez', dob: '1990-07-24', provider: 'Dr. Patel', status: 'Inactive', balance: 0.0 },
+    { id: 'P-003', name: 'Carol White', dob: '1978-11-05', provider: 'Dr. Smith', status: 'Active', balance: 340.5 },
+    { id: 'P-004', name: 'David Brown', dob: '2000-01-30', provider: 'Dr. Lee', status: 'Pending', balance: 75.25 },
+    { id: 'P-005', name: 'Eva Green', dob: '1995-09-18', provider: 'Dr. Patel', status: 'Active', balance: 210.0 },
+];
+const COLUMNS = [
+    {
+        accessorKey: 'id',
+        header: 'ID',
+        cell: (info) => info.getValue(),
+    },
+    {
+        accessorKey: 'name',
+        header: 'Patient Name',
+        cell: (info) => info.getValue(),
+    },
+    {
+        accessorKey: 'dob',
+        header: 'Date of Birth',
+        cell: (info) => info.getValue(),
+    },
+    {
+        accessorKey: 'provider',
+        header: 'Provider',
+        cell: (info) => info.getValue(),
+    },
+    {
+        accessorKey: 'status',
+        header: 'Status',
+        cell: (info) => info.getValue(),
+    },
+    {
+        accessorKey: 'balance',
+        header: 'Balance',
+        cell: (info) => `$${info.getValue().toFixed(2)}`,
+    },
+];
+function DataTableDemo(props) {
+    const [pageNumber, setPageNumber] = useState(1);
+    const [pageSize, setPageSize] = useState(25);
+    return (_jsx(DataTable, { data: SAMPLE_DATA, total: SAMPLE_DATA.length, columns: COLUMNS, pageNumber: pageNumber, pagesTotal: Math.ceil(SAMPLE_DATA.length / pageSize), pageSize: pageSize, setPageNumber: setPageNumber, setPageSize: setPageSize, ...props }));
+}
+const meta = {
+    title: 'Data/DataTable',
+    component: DataTable,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+    args: {
+        data: [],
+        total: 0,
+        pageNumber: 1,
+        pagesTotal: 1,
+        pageSize: 25,
+        setPageNumber: noopSetPageNumber,
+        setPageSize: noopSetPageSize,
+        columns: [],
+    },
+};
+export default meta;
+export const Default = {
+    args: {},
+    render: () => _jsx(DataTableDemo, {}),
+};
+export const WithRowClick = {
+    args: {},
+    render: () => (_jsx(DataTableDemo, { onRowClick: (row) => alert(`Clicked: ${row.name}`) })),
+};
+export const EmptyState = {
+    args: {},
+    render: () => _jsx(EmptyStateDemo, {}),
+};
+function EmptyStateDemo() {
+    const [pageNumber, setPageNumber] = useState(1);
+    const [pageSize, setPageSize] = useState(25);
+    return (_jsx(DataTable, { data: [], total: 0, columns: COLUMNS, pageNumber: pageNumber, pagesTotal: 0, pageSize: pageSize, setPageNumber: setPageNumber, setPageSize: setPageSize }));
+}
+export const WithFilters = {
+    args: {},
+    render: () => (_jsx(DataTableDemo, { filters: [
+            { id: 'name', accessor: 'name', type: 'string', operator: '%', helperText: 'Search by name' },
+            { id: 'status', accessor: 'status', type: 'string', operator: '=', helperText: 'Filter by status' },
+        ], onFilterChange: (filter) => console.log('Filter changed:', filter) })),
+};

package/dist/src/stories/FileUploader.stories.js

@@ -1,4 +1,4 @@
-import { expect, userEvent, within } from '@storybook/test';
+import { expect, userEvent, within } from 'storybook/test';
 import { Form } from '../components';
 const meta = {
     title: 'Forms/FileUploader',

package/dist/src/stories/Login.stories.js

@@ -1,4 +1,4 @@
-import { expect, userEvent, within } from '@storybook/test';
+import { expect, userEvent, within } from 'storybook/test';
 import { Form } from '../components';
 const meta = {
     title: 'Forms/Login',

package/dist/src/stories/SecondFactorAuth.stories.js

@@ -1,4 +1,4 @@
-import { expect, userEvent, within } from '@storybook/test';
+import { expect, userEvent, within } from 'storybook/test';
 import { Form } from '../components';
 const meta = {
     title: 'Forms/SecondFactorAuth',

package/dist/src/stories/VerifyAction.stories.js

@@ -1,4 +1,4 @@
-import { expect, userEvent, within } from '@storybook/test';
+import { expect, userEvent, within } from 'storybook/test';
 import { VerifyAction } from '../components';
 const meta = {
     title: 'Feedback/VerifyAction',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vrobots/storybook",
   "private": false,
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -21,8 +21,10 @@
     "@chakra-ui/react": "^3.32.0",
     "@emotion/react": "^11.14.0",
     "@storybook/addon-themes": "^10.2.16",
+    "@tanstack/react-table": "^8.21.3",
     "axios": "^1.13.4",
     "motion": "^12.34.0",
+    "next": "^16.2.4",
     "next-themes": "^0.4.6",
     "owasp-password-strength-test": "^1.3.0",
     "react": "^19.2.0",
@@ -40,7 +42,6 @@
     "@storybook/addon-docs": "^10.2.16",
     "@storybook/addon-vitest": "^10.2.16",
     "@storybook/react-vite": "^10.2.16",
-    "@storybook/test": "^8.6.15",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",