munza-x-data-grid 3.0.0-beta.8 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (78) hide show
  1. package/README.md +471 -187
  2. package/dist/components/ui/button.d.ts +10 -0
  3. package/dist/components/ui/checkbox.d.ts +4 -0
  4. package/dist/components/ui/collapsible.d.ts +5 -0
  5. package/dist/components/ui/debounced-input.d.ts +7 -0
  6. package/dist/components/ui/dropdown-menu.d.ts +29 -0
  7. package/dist/components/ui/empty.d.ts +11 -0
  8. package/dist/components/ui/input.d.ts +3 -0
  9. package/dist/components/ui/label.d.ts +4 -0
  10. package/dist/components/ui/native-select.d.ts +8 -0
  11. package/dist/components/ui/skeleton.d.ts +2 -0
  12. package/dist/components/ui/table.d.ts +10 -0
  13. package/dist/index.cjs +60 -0
  14. package/dist/index.css +56 -0
  15. package/dist/index.d.ts +1 -7
  16. package/dist/index.js +11168 -0
  17. package/dist/lib/utils.d.ts +2 -0
  18. package/dist/package/components/feedback/NoDataFoundMsg.d.ts +2 -0
  19. package/dist/package/components/feedback/TableError.d.ts +2 -0
  20. package/dist/package/components/feedback/TableErrorMsg.d.ts +2 -0
  21. package/dist/package/components/feedback/TableLeftNoData.d.ts +2 -0
  22. package/dist/package/components/feedback/TableLeftSkeleton.d.ts +2 -0
  23. package/dist/package/components/feedback/TableNoData.d.ts +2 -0
  24. package/dist/package/components/feedback/TableRightNoData.d.ts +2 -0
  25. package/dist/package/components/feedback/TableRightSkeleton.d.ts +2 -0
  26. package/dist/package/components/feedback/TableRowSkeleton.d.ts +7 -0
  27. package/dist/package/components/feedback/TableSkeleton.d.ts +2 -0
  28. package/dist/package/components/header/HeaderFilter.d.ts +5 -0
  29. package/dist/package/components/header/HeaderMenu.d.ts +5 -0
  30. package/dist/package/components/header/HeaderResizing.d.ts +5 -0
  31. package/dist/package/components/header/HeaderSort.d.ts +5 -0
  32. package/dist/package/components/pagination/index.d.ts +4 -0
  33. package/dist/package/components/table/TBody.d.ts +3 -0
  34. package/dist/package/components/table/TCell.d.ts +6 -0
  35. package/dist/package/components/table/TGetLeftBody.d.ts +3 -0
  36. package/dist/package/components/table/TGetLeftHeader.d.ts +2 -0
  37. package/dist/package/components/table/TGetLeftMain.d.ts +2 -0
  38. package/dist/package/components/table/TGetRightBody.d.ts +3 -0
  39. package/dist/package/components/table/TGetRightHeader.d.ts +2 -0
  40. package/dist/package/components/table/TGetRightMain.d.ts +2 -0
  41. package/dist/package/components/table/THead.d.ts +6 -0
  42. package/dist/package/components/table/THeader.d.ts +2 -0
  43. package/dist/package/components/table/TMain.d.ts +3 -0
  44. package/dist/package/components/table/TableCellPin.d.ts +6 -0
  45. package/dist/package/components/table/TableLeftCellPin.d.ts +5 -0
  46. package/dist/package/components/table/TableRightCellPin.d.ts +5 -0
  47. package/dist/package/components/toolbar/ToolbarColumns.d.ts +2 -0
  48. package/dist/package/components/toolbar/ToolbarDnd.d.ts +2 -0
  49. package/dist/package/components/toolbar/ToolbarFilters.d.ts +3 -0
  50. package/dist/package/components/toolbar/ToolbarRows.d.ts +2 -0
  51. package/dist/package/components/toolbar/ToolbarSettings.d.ts +2 -0
  52. package/dist/package/components/toolbar/index.d.ts +4 -0
  53. package/dist/package/contexts/GridContext.d.ts +56 -0
  54. package/dist/package/core/index.d.ts +3 -0
  55. package/dist/package/features/columnOrder.d.ts +4 -0
  56. package/dist/package/features/columnPinning.d.ts +5 -0
  57. package/dist/package/features/columnSizing.d.ts +5 -0
  58. package/dist/package/features/columnVisibility.d.ts +5 -0
  59. package/dist/package/features/rowDensity.d.ts +24 -0
  60. package/dist/package/features/rowPinning.d.ts +5 -0
  61. package/dist/package/features/splitView.d.ts +4 -0
  62. package/dist/package/hooks/useGridState.d.ts +19 -0
  63. package/dist/package/hooks/useQueryArgs.d.ts +12 -0
  64. package/dist/package/hooks/useSyncScroll.d.ts +7 -0
  65. package/dist/package/index.d.ts +8 -0
  66. package/dist/package/types/index.d.ts +303 -0
  67. package/dist/package/utils/URLSearch.d.ts +21 -0
  68. package/dist/package/utils/buildQueryString.d.ts +2 -0
  69. package/dist/package/utils/buildSortString.d.ts +4 -0
  70. package/dist/package/utils/getPinStyles.d.ts +3 -0
  71. package/package.json +63 -49
  72. package/dist/App.d.ts +0 -2
  73. package/dist/favicon.svg +0 -1
  74. package/dist/icons.svg +0 -24
  75. package/dist/main.d.ts +0 -1
  76. package/dist/munza-x-data-grid.cjs.js +0 -5
  77. package/dist/munza-x-data-grid.es.js +0 -29
  78. package/dist/style.css +0 -3
@@ -0,0 +1,2 @@
1
+ import { ClassValue } from 'clsx';
2
+ export declare function cn(...inputs: ClassValue[]): string;
@@ -0,0 +1,2 @@
1
+ declare const NoDataFoundMsg: () => import("react").JSX.Element;
2
+ export default NoDataFoundMsg;
@@ -0,0 +1,2 @@
1
+ declare const TableError: () => import("react").JSX.Element;
2
+ export default TableError;
@@ -0,0 +1,2 @@
1
+ declare const TableErrorMsg: () => import("react").JSX.Element;
2
+ export default TableErrorMsg;
@@ -0,0 +1,2 @@
1
+ declare const TableLeftNoData: () => import("react").JSX.Element;
2
+ export default TableLeftNoData;
@@ -0,0 +1,2 @@
1
+ declare const TableLeftSkeleton: () => import("react").JSX.Element;
2
+ export default TableLeftSkeleton;
@@ -0,0 +1,2 @@
1
+ declare const TableNoData: () => import("react").JSX.Element;
2
+ export default TableNoData;
@@ -0,0 +1,2 @@
1
+ declare const TableRightNoData: () => import("react").JSX.Element;
2
+ export default TableRightNoData;
@@ -0,0 +1,2 @@
1
+ declare const TableRightSkeleton: () => import("react").JSX.Element;
2
+ export default TableRightSkeleton;
@@ -0,0 +1,7 @@
1
+ import { Column } from '@tanstack/react-table';
2
+ declare const TableRowSkeleton: ({ column, i, j, }: {
3
+ column: Column<unknown, unknown>;
4
+ i: number;
5
+ j: number;
6
+ }) => import("react").JSX.Element;
7
+ export default TableRowSkeleton;
@@ -0,0 +1,2 @@
1
+ declare const TableSkeleton: () => import("react").JSX.Element;
2
+ export default TableSkeleton;
@@ -0,0 +1,5 @@
1
+ import { Column } from '@tanstack/react-table';
2
+ declare const HeaderFilter: <T>({ column }: {
3
+ column: Column<T, unknown>;
4
+ }) => import("react").JSX.Element | null;
5
+ export default HeaderFilter;
@@ -0,0 +1,5 @@
1
+ import { Header } from '@tanstack/react-table';
2
+ declare const HeaderMenu: <T>({ header }: {
3
+ header: Header<T, unknown>;
4
+ }) => import("react").JSX.Element | null;
5
+ export default HeaderMenu;
@@ -0,0 +1,5 @@
1
+ import { Header } from '@tanstack/react-table';
2
+ declare const HeaderResizing: <T>({ header }: {
3
+ header: Header<T, unknown>;
4
+ }) => import("react").JSX.Element;
5
+ export default HeaderResizing;
@@ -0,0 +1,5 @@
1
+ import { Header } from '@tanstack/react-table';
2
+ declare const HeaderSort: <T>({ header }: {
3
+ header: Header<T, unknown>;
4
+ }) => import("react").JSX.Element;
5
+ export default HeaderSort;
@@ -0,0 +1,4 @@
1
+ declare const Pagination: ({ pagination }: {
2
+ pagination: number[];
3
+ }) => import("react").JSX.Element;
4
+ export default Pagination;
@@ -0,0 +1,3 @@
1
+ import { default as React } from 'react';
2
+ declare const TBody: () => React.JSX.Element;
3
+ export default TBody;
@@ -0,0 +1,6 @@
1
+ import { Cell } from '@tanstack/react-table';
2
+ interface TCellProps<T> {
3
+ cell: Cell<T, unknown>;
4
+ }
5
+ declare const TCell: <T>({ cell }: TCellProps<T>) => import("react").JSX.Element;
6
+ export default TCell;
@@ -0,0 +1,3 @@
1
+ import { default as React } from 'react';
2
+ declare const TGetLeftBody: () => React.JSX.Element;
3
+ export default TGetLeftBody;
@@ -0,0 +1,2 @@
1
+ declare const TGetLeftHeader: () => import("react").JSX.Element;
2
+ export default TGetLeftHeader;
@@ -0,0 +1,2 @@
1
+ declare const TGetLeftMain: () => import("react").JSX.Element;
2
+ export default TGetLeftMain;
@@ -0,0 +1,3 @@
1
+ import { default as React } from 'react';
2
+ declare const TGetRightBody: () => React.JSX.Element;
3
+ export default TGetRightBody;
@@ -0,0 +1,2 @@
1
+ declare const TGetRightHeader: () => import("react").JSX.Element;
2
+ export default TGetRightHeader;
@@ -0,0 +1,2 @@
1
+ declare const TGetRightMain: () => import("react").JSX.Element;
2
+ export default TGetRightMain;
@@ -0,0 +1,6 @@
1
+ import { Header } from '@tanstack/react-table';
2
+ interface THeadProps<T> {
3
+ header: Header<T, unknown>;
4
+ }
5
+ declare const THead: <T>({ header }: THeadProps<T>) => import("react").JSX.Element;
6
+ export default THead;
@@ -0,0 +1,2 @@
1
+ declare const THeader: () => import("react").JSX.Element;
2
+ export default THeader;
@@ -0,0 +1,3 @@
1
+ import { default as React } from 'react';
2
+ declare const TMain: () => React.JSX.Element;
3
+ export default TMain;
@@ -0,0 +1,6 @@
1
+ import { Row, Table } from '@tanstack/react-table';
2
+ export declare function TableCellPin({ row, table, isSplit, }: {
3
+ row: Row<any>;
4
+ table: Table<any>;
5
+ isSplit: boolean;
6
+ }): import("react").JSX.Element;
@@ -0,0 +1,5 @@
1
+ import { Row, Table } from '@tanstack/react-table';
2
+ export declare function TableLeftCellPin({ row, table, }: {
3
+ row: Row<any>;
4
+ table: Table<any>;
5
+ }): import("react").JSX.Element;
@@ -0,0 +1,5 @@
1
+ import { Row, Table } from '@tanstack/react-table';
2
+ export declare function TableRightCellPin({ row, table, }: {
3
+ row: Row<any>;
4
+ table: Table<any>;
5
+ }): import("react").JSX.Element;
@@ -0,0 +1,2 @@
1
+ declare const ToolbarColumns: () => import("react").JSX.Element;
2
+ export default ToolbarColumns;
@@ -0,0 +1,2 @@
1
+ declare const ToolbarDnd: () => import("react").JSX.Element;
2
+ export default ToolbarDnd;
@@ -0,0 +1,3 @@
1
+ import { default as React } from 'react';
2
+ declare const ToolbarFilters: () => React.JSX.Element;
3
+ export default ToolbarFilters;
@@ -0,0 +1,2 @@
1
+ declare const ToolbarRows: () => import("react").JSX.Element;
2
+ export default ToolbarRows;
@@ -0,0 +1,2 @@
1
+ declare const ToolbarSettings: () => import("react").JSX.Element;
2
+ export default ToolbarSettings;
@@ -0,0 +1,4 @@
1
+ declare const Toolbar: ({ height }: {
2
+ height: number;
3
+ }) => import("react").JSX.Element;
4
+ export default Toolbar;
@@ -0,0 +1,56 @@
1
+ import { ColumnPinningState, OnChangeFn, PaginationState, Row, RowSelectionState, SortingState, TableState, ColumnDef, ColumnFiltersState, Table } from '@tanstack/react-table';
2
+ import { default as React } from 'react';
3
+ import { DensityState } from '../features/rowDensity';
4
+ export interface GridContextProps<T> {
5
+ table: Table<T>;
6
+ paneRef1: React.RefObject<HTMLDivElement | null>;
7
+ paneRef2: React.RefObject<HTMLDivElement | null>;
8
+ paneRef3: React.RefObject<HTMLDivElement | null>;
9
+ paneRef4: React.RefObject<HTMLDivElement | null>;
10
+ paneRef5: React.RefObject<HTMLDivElement | null>;
11
+ paneRef6: React.RefObject<HTMLDivElement | null>;
12
+ density: DensityState;
13
+ isFetching?: boolean;
14
+ isLoading?: boolean;
15
+ isError?: boolean;
16
+ isSplit: boolean;
17
+ setIsSplit: React.Dispatch<React.SetStateAction<boolean>>;
18
+ columnPinning: ColumnPinningState;
19
+ gridWrapperRef: React.RefObject<HTMLDivElement | null>;
20
+ globalFilter: string;
21
+ refetch?: () => void;
22
+ height?: string;
23
+ renderSubComponent?: (props: {
24
+ row: Row<T>;
25
+ }) => React.ReactElement;
26
+ setGlobalFilter?: React.Dispatch<React.SetStateAction<string>>;
27
+ }
28
+ interface GridContextProviderProps<T> {
29
+ children: React.ReactNode;
30
+ payload?: {
31
+ data: T[];
32
+ total: number;
33
+ };
34
+ columns: ColumnDef<T>[];
35
+ state?: Partial<TableState>;
36
+ onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>;
37
+ onPaginationChange?: OnChangeFn<PaginationState>;
38
+ onRowSelectionChange?: OnChangeFn<RowSelectionState>;
39
+ onSortingChange?: OnChangeFn<SortingState>;
40
+ manualPagination?: boolean;
41
+ enableRowSelection?: boolean;
42
+ isLoading?: boolean;
43
+ isError?: boolean;
44
+ isFetching?: boolean;
45
+ refetch?: () => void;
46
+ setGlobalFilter?: React.Dispatch<React.SetStateAction<string>>;
47
+ renderSubComponent?: (props: {
48
+ row: Row<T>;
49
+ }) => React.ReactElement;
50
+ getRowCanExpand?: (row: Row<T>) => boolean;
51
+ name?: string;
52
+ height?: string;
53
+ }
54
+ export declare const GridContextProvider: <T>({ children, payload, columns, state, onColumnFiltersChange, onPaginationChange, onSortingChange, onRowSelectionChange, setGlobalFilter, manualPagination, enableRowSelection, isError, isLoading, isFetching, refetch, getRowCanExpand, renderSubComponent, name, height, }: GridContextProviderProps<T>) => React.JSX.Element;
55
+ export declare function useGrid(): GridContextProps<unknown>;
56
+ export {};
@@ -0,0 +1,3 @@
1
+ import { GridProps } from '../types';
2
+ declare const Grid: <T>({ columns, payload, state, onColumnFiltersChange, onPaginationChange, onSortingChange, onRowSelectionChange, isLoading, isError, setGlobalFilter, getRowCanExpand, renderSubComponent, manualPagination, enableRowSelection, isFetching, refetch, height, isToolbar, isPagination, children, name, }: GridProps<T>) => import("react").JSX.Element;
3
+ export { Grid };
@@ -0,0 +1,4 @@
1
+ import { Dispatch, SetStateAction } from 'react';
2
+ export declare function getStoredColumnOrder(gridId: string, defaultOrder: string[]): string[];
3
+ export declare function setStoredColumnOrder(gridId: string, order: string[]): void;
4
+ export declare function useColumnOrderState(gridId: string, defaultOrder: string[]): readonly [string[], Dispatch<SetStateAction<string[]>>];
@@ -0,0 +1,5 @@
1
+ import { ColumnPinningState } from '@tanstack/react-table';
2
+ import { Dispatch, SetStateAction } from 'react';
3
+ export declare function getStoredColumnPinning(gridId: string): ColumnPinningState;
4
+ export declare function setStoredColumnPinning(gridId: string, pinning: ColumnPinningState): void;
5
+ export declare function useColumnPinningState(gridId: string): readonly [ColumnPinningState, Dispatch<SetStateAction<ColumnPinningState>>];
@@ -0,0 +1,5 @@
1
+ import { ColumnSizingState } from '@tanstack/react-table';
2
+ import { Dispatch, SetStateAction } from 'react';
3
+ export declare function getStoredColumnSizing(gridId: string): ColumnSizingState;
4
+ export declare function setStoredColumnSizing(gridId: string, sizing: ColumnSizingState): void;
5
+ export declare function useColumnSizingState(gridId: string): readonly [ColumnSizingState, Dispatch<SetStateAction<ColumnSizingState>>];
@@ -0,0 +1,5 @@
1
+ import { VisibilityState } from '@tanstack/react-table';
2
+ import { Dispatch, SetStateAction } from 'react';
3
+ export declare function getStoredColumnVisibility(gridId: string): VisibilityState;
4
+ export declare function setStoredColumnVisibility(gridId: string, visibility: VisibilityState): void;
5
+ export declare function useColumnVisibilityState(gridId: string): readonly [VisibilityState, Dispatch<SetStateAction<VisibilityState>>];
@@ -0,0 +1,24 @@
1
+ import { OnChangeFn, RowData, TableFeature, Updater } from '@tanstack/react-table';
2
+ export type DensityState = 'sm' | 'md' | 'lg';
3
+ export interface DensityTableState {
4
+ density: DensityState;
5
+ }
6
+ export interface DensityOptions {
7
+ enableDensity?: boolean;
8
+ onDensityChange?: OnChangeFn<DensityState>;
9
+ gridId?: string;
10
+ }
11
+ export interface DensityInstance {
12
+ setDensity: (updater: Updater<DensityState>) => void;
13
+ toggleDensity: (value?: DensityState) => void;
14
+ }
15
+ declare module '@tanstack/react-table' {
16
+ interface TableState extends DensityTableState {
17
+ }
18
+ interface TableOptionsResolved<TData extends RowData> extends DensityOptions {
19
+ }
20
+ interface Table<TData extends RowData> extends DensityInstance {
21
+ }
22
+ }
23
+ export declare const DensityFeature: TableFeature<any>;
24
+ export declare const getStoredDensity: (gridId: string) => DensityState;
@@ -0,0 +1,5 @@
1
+ import { RowPinningState } from '@tanstack/react-table';
2
+ import { Dispatch, SetStateAction } from 'react';
3
+ export declare function getStoredRowPinning(gridId: string): RowPinningState;
4
+ export declare function setStoredRowPinning(gridId: string, pinning: RowPinningState): void;
5
+ export declare function useRowPinningState(gridId: string): readonly [RowPinningState, Dispatch<SetStateAction<RowPinningState>>];
@@ -0,0 +1,4 @@
1
+ import { Dispatch, SetStateAction } from 'react';
2
+ export declare function getStoredIsSplit(gridId: string): boolean;
3
+ export declare function setStoredIsSplit(gridId: string, isSplit: boolean): void;
4
+ export declare function useSplitViewState(gridId: string): readonly [boolean, Dispatch<SetStateAction<boolean>>];
@@ -0,0 +1,19 @@
1
+ import { ColumnFiltersState, PaginationState, RowSelectionState, SortingState } from '@tanstack/react-table';
2
+ import { default as React } from 'react';
3
+ export declare const useGridState: () => {
4
+ state: {
5
+ columnFilters: ColumnFiltersState;
6
+ globalFilter: string;
7
+ pagination: PaginationState;
8
+ sorting: SortingState;
9
+ rowSelection: RowSelectionState;
10
+ };
11
+ handlers: {
12
+ onColumnFiltersChange: React.Dispatch<React.SetStateAction<ColumnFiltersState>>;
13
+ onPaginationChange: React.Dispatch<React.SetStateAction<PaginationState>>;
14
+ onSortingChange: React.Dispatch<React.SetStateAction<SortingState>>;
15
+ setGlobalFilter: React.Dispatch<React.SetStateAction<string>>;
16
+ onRowSelectionChange: React.Dispatch<React.SetStateAction<RowSelectionState>>;
17
+ };
18
+ rowSelection: RowSelectionState;
19
+ };
@@ -0,0 +1,12 @@
1
+ import { ColumnFiltersState, PaginationState, SortingState } from '@tanstack/react-table';
2
+ export declare const useQueryArgs: (state: {
3
+ columnFilters: ColumnFiltersState;
4
+ globalFilter: string;
5
+ pagination: PaginationState;
6
+ sorting: SortingState;
7
+ }) => {
8
+ pagination: PaginationState;
9
+ queryParams: string;
10
+ sort: string;
11
+ globalFilter: string;
12
+ };
@@ -0,0 +1,7 @@
1
+ type Axis = 'x' | 'y' | 'both';
2
+ interface Props {
3
+ refs: React.RefObject<HTMLElement | null>[];
4
+ axis?: Axis;
5
+ }
6
+ declare const useSyncScroll: ({ refs, axis }: Props) => void;
7
+ export default useSyncScroll;
@@ -0,0 +1,8 @@
1
+ import { ColumnDef, ColumnFiltersState, PaginationState, Row, SortingState } from '@tanstack/react-table';
2
+ export { useGrid, type GridContextProps } from './contexts/GridContext';
3
+ export { Grid } from './core/index';
4
+ export { useGridState } from './hooks/useGridState';
5
+ export { useQueryArgs } from './hooks/useQueryArgs';
6
+ export type { GridProps } from './types';
7
+ export { URLSearch } from './utils/URLSearch';
8
+ export type { ColumnDef, ColumnFiltersState, PaginationState, Row, SortingState, };