@trackunit/react-table 0.0.209 → 0.0.210-alpha-1820203754.0

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.
package/index.cjs.js CHANGED
@@ -405,9 +405,9 @@ const cvaColumnFilterGrabbable = cssClassVarianceUtilities.cvaMerge(["flex", "it
405
405
  /**
406
406
  * ColumnFilter component for managing visibility and order of table columns.
407
407
  *
408
- * @template T - The type representing the data model associated with the columns.
409
- * @template V - The type representing the value of columns.
410
- * @param {IColumnFilterProps<T, V>} props - The props object containing necessary properties.
408
+ * @template TColumnFilter - The type representing the data model associated with the columns.
409
+ * @template TColumnFilterValue - The type representing the value of columns.
410
+ * @param {ColumnFilterProps<TColumnFilter, TColumnFilterValue>} props - The props object containing necessary properties.
411
411
  * @returns {JSX.Element | null} A React JSX element representing the ColumnFilter component or null if columns are not provided.
412
412
  */
413
413
  const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder, columnOrder, onUserEvent, }) => {
@@ -558,12 +558,12 @@ const CompactIcon = () => {
558
558
  /**
559
559
  * Sorting component for managing table column sorting.
560
560
  *
561
- * @template T - The type representing the data model associated with the columns.
562
- * @template V - The type representing the value of columns.
563
- * @param {SortingProps<T, V>} props - The props object containing sorting properties.
561
+ * @template TSorting - The type representing the data model associated with the columns.
562
+ * @template TSortingValue - The type representing the value of columns.
563
+ * @param {SortingProps<TSorting, TSortingValue>} props - The props object containing sorting properties.
564
564
  * @returns {JSX.Element | null} A React JSX element representing the Sorting component or null if there are no sortable columns.
565
565
  */
566
- const Sorting = ({ columns }) => {
566
+ const Sorting = ({ columns, }) => {
567
567
  var _a, _b;
568
568
  const [t] = useTranslation();
569
569
  const sortableColumns = columns.filter(column => column.getCanSort());
@@ -588,60 +588,6 @@ const Sorting = ({ columns }) => {
588
588
  }) }), jsxRuntime.jsxs(reactFormComponents.RadioGroup, { id: "sortOrder", onChange: onSelectOrder, value: currentSortDirection, children: [jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: t("table.sorting.ascending"), value: "asc" }), jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: t("table.sorting.descending"), value: "desc" })] })] }) })] }) }));
589
589
  };
590
590
 
591
- /**
592
- * Custom hook for handling Relay pagination in tables.
593
- *
594
- * @param {RelayPaginationProps} props - The props object containing pagination configuration.
595
- * @returns {RelayPaginationSupport} An object containing functions and state for managing Relay pagination.
596
- */
597
- const useRelayPagination = (props = { pageSize: 50 }) => {
598
- const [variables, setVariables] = React.useState({ first: props.pageSize });
599
- const [pageInfo, setPageInfo] = React.useState();
600
- const [isLoading, setIsLoading] = React.useState(false);
601
- const nextPage = React.useCallback(() => {
602
- if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasNextPage) {
603
- setVariables({
604
- after: (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.endCursor) === null ? undefined : pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.endCursor,
605
- first: props.pageSize,
606
- });
607
- }
608
- }, [pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.endCursor, pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasNextPage, props.pageSize]);
609
- const previousPage = React.useCallback(() => {
610
- if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasPreviousPage) {
611
- setVariables({
612
- before: (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.startCursor) === null ? undefined : pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.startCursor,
613
- last: props.pageSize,
614
- });
615
- }
616
- }, [pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasPreviousPage, pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.startCursor, props.pageSize]);
617
- const reset = React.useCallback(() => {
618
- setVariables({
619
- last: undefined,
620
- before: undefined,
621
- after: undefined,
622
- first: props.pageSize,
623
- });
624
- if (props.onReset) {
625
- props.onReset();
626
- }
627
- }, [props.onReset, props.pageSize]);
628
- const pagination = React.useMemo(() => {
629
- return {
630
- variables,
631
- table: {
632
- nextPage,
633
- previousPage,
634
- isLoading,
635
- setIsLoading,
636
- reset,
637
- pageInfo: pageInfo === null ? undefined : pageInfo,
638
- setPageInfo,
639
- },
640
- };
641
- }, [variables, nextPage, previousPage, isLoading, reset, pageInfo]);
642
- return pagination;
643
- };
644
-
645
591
  /**
646
592
  * Hook for managing and controlling a table's state and behavior.
647
593
  *
@@ -745,7 +691,7 @@ const useTable = (_a) => {
745
691
  * columns,
746
692
  * });
747
693
  */
748
- const useTableSelection = ({ data, defaultSelectedIds, }) => {
694
+ const useTableSelection = ({ data, defaultSelectedIds, enableRowSelection = true, }) => {
749
695
  const [rowSelection, setRowSelection] = React.useState({});
750
696
  React.useEffect(() => {
751
697
  const initialSelection = {};
@@ -786,8 +732,8 @@ const useTableSelection = ({ data, defaultSelectedIds, }) => {
786
732
  const selectionTableProps = React.useMemo(() => ({
787
733
  onRowSelectionChange: setRowSelection,
788
734
  getRowId: row => row.id,
789
- enableRowSelection: true,
790
- }), []);
735
+ enableRowSelection,
736
+ }), [enableRowSelection]);
791
737
  return React.useMemo(() => ({
792
738
  toggleRowSelectionState,
793
739
  selectionColumn,
@@ -862,6 +808,5 @@ exports.fromTUSortToTanStack = fromTUSortToTanStack;
862
808
  exports.fromTUSortToTanStackSite = fromTUSortToTanStackSite;
863
809
  exports.fromTanStackToTUSort = fromTanStackToTUSort;
864
810
  exports.fromTanStackToTUSortSite = fromTanStackToTUSortSite;
865
- exports.useRelayPagination = useRelayPagination;
866
811
  exports.useTable = useTable;
867
812
  exports.useTableSelection = useTableSelection;
package/index.esm.js CHANGED
@@ -380,9 +380,9 @@ const cvaColumnFilterGrabbable = cvaMerge(["flex", "items-center", "justify-cent
380
380
  /**
381
381
  * ColumnFilter component for managing visibility and order of table columns.
382
382
  *
383
- * @template T - The type representing the data model associated with the columns.
384
- * @template V - The type representing the value of columns.
385
- * @param {IColumnFilterProps<T, V>} props - The props object containing necessary properties.
383
+ * @template TColumnFilter - The type representing the data model associated with the columns.
384
+ * @template TColumnFilterValue - The type representing the value of columns.
385
+ * @param {ColumnFilterProps<TColumnFilter, TColumnFilterValue>} props - The props object containing necessary properties.
386
386
  * @returns {JSX.Element | null} A React JSX element representing the ColumnFilter component or null if columns are not provided.
387
387
  */
388
388
  const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder, columnOrder, onUserEvent, }) => {
@@ -533,12 +533,12 @@ const CompactIcon = () => {
533
533
  /**
534
534
  * Sorting component for managing table column sorting.
535
535
  *
536
- * @template T - The type representing the data model associated with the columns.
537
- * @template V - The type representing the value of columns.
538
- * @param {SortingProps<T, V>} props - The props object containing sorting properties.
536
+ * @template TSorting - The type representing the data model associated with the columns.
537
+ * @template TSortingValue - The type representing the value of columns.
538
+ * @param {SortingProps<TSorting, TSortingValue>} props - The props object containing sorting properties.
539
539
  * @returns {JSX.Element | null} A React JSX element representing the Sorting component or null if there are no sortable columns.
540
540
  */
541
- const Sorting = ({ columns }) => {
541
+ const Sorting = ({ columns, }) => {
542
542
  var _a, _b;
543
543
  const [t] = useTranslation();
544
544
  const sortableColumns = columns.filter(column => column.getCanSort());
@@ -563,60 +563,6 @@ const Sorting = ({ columns }) => {
563
563
  }) }), jsxs(RadioGroup, { id: "sortOrder", onChange: onSelectOrder, value: currentSortDirection, children: [jsx(RadioItem, { className: "w-full", label: t("table.sorting.ascending"), value: "asc" }), jsx(RadioItem, { className: "w-full", label: t("table.sorting.descending"), value: "desc" })] })] }) })] }) }));
564
564
  };
565
565
 
566
- /**
567
- * Custom hook for handling Relay pagination in tables.
568
- *
569
- * @param {RelayPaginationProps} props - The props object containing pagination configuration.
570
- * @returns {RelayPaginationSupport} An object containing functions and state for managing Relay pagination.
571
- */
572
- const useRelayPagination = (props = { pageSize: 50 }) => {
573
- const [variables, setVariables] = useState({ first: props.pageSize });
574
- const [pageInfo, setPageInfo] = useState();
575
- const [isLoading, setIsLoading] = useState(false);
576
- const nextPage = useCallback(() => {
577
- if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasNextPage) {
578
- setVariables({
579
- after: (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.endCursor) === null ? undefined : pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.endCursor,
580
- first: props.pageSize,
581
- });
582
- }
583
- }, [pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.endCursor, pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasNextPage, props.pageSize]);
584
- const previousPage = useCallback(() => {
585
- if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasPreviousPage) {
586
- setVariables({
587
- before: (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.startCursor) === null ? undefined : pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.startCursor,
588
- last: props.pageSize,
589
- });
590
- }
591
- }, [pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasPreviousPage, pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.startCursor, props.pageSize]);
592
- const reset = useCallback(() => {
593
- setVariables({
594
- last: undefined,
595
- before: undefined,
596
- after: undefined,
597
- first: props.pageSize,
598
- });
599
- if (props.onReset) {
600
- props.onReset();
601
- }
602
- }, [props.onReset, props.pageSize]);
603
- const pagination = useMemo(() => {
604
- return {
605
- variables,
606
- table: {
607
- nextPage,
608
- previousPage,
609
- isLoading,
610
- setIsLoading,
611
- reset,
612
- pageInfo: pageInfo === null ? undefined : pageInfo,
613
- setPageInfo,
614
- },
615
- };
616
- }, [variables, nextPage, previousPage, isLoading, reset, pageInfo]);
617
- return pagination;
618
- };
619
-
620
566
  /**
621
567
  * Hook for managing and controlling a table's state and behavior.
622
568
  *
@@ -720,7 +666,7 @@ const useTable = (_a) => {
720
666
  * columns,
721
667
  * });
722
668
  */
723
- const useTableSelection = ({ data, defaultSelectedIds, }) => {
669
+ const useTableSelection = ({ data, defaultSelectedIds, enableRowSelection = true, }) => {
724
670
  const [rowSelection, setRowSelection] = useState({});
725
671
  useEffect(() => {
726
672
  const initialSelection = {};
@@ -761,8 +707,8 @@ const useTableSelection = ({ data, defaultSelectedIds, }) => {
761
707
  const selectionTableProps = useMemo(() => ({
762
708
  onRowSelectionChange: setRowSelection,
763
709
  getRowId: row => row.id,
764
- enableRowSelection: true,
765
- }), []);
710
+ enableRowSelection,
711
+ }), [enableRowSelection]);
766
712
  return useMemo(() => ({
767
713
  toggleRowSelectionState,
768
714
  selectionColumn,
@@ -824,4 +770,4 @@ const fromTanStackToTUSortSite = (input) => {
824
770
  */
825
771
  setupLibraryTranslations();
826
772
 
827
- export { ActionSheet, ColumnFilter, RowSpacing, Sorting, Table, fromTUSortToTanStack, fromTUSortToTanStackSite, fromTanStackToTUSort, fromTanStackToTUSortSite, useRelayPagination, useTable, useTableSelection };
773
+ export { ActionSheet, ColumnFilter, RowSpacing, Sorting, Table, fromTUSortToTanStack, fromTUSortToTanStackSite, fromTanStackToTUSort, fromTanStackToTUSortSite, useTable, useTableSelection };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-table",
3
- "version": "0.0.209",
3
+ "version": "0.0.210-alpha-1820203754.0",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
@@ -21,7 +21,8 @@
21
21
  "@trackunit/react-core-contexts-api": "*",
22
22
  "@trackunit/css-class-variance-utilities": "*",
23
23
  "@trackunit/ui-icons": "*",
24
- "@trackunit/i18n-library-translation": "*"
24
+ "@trackunit/i18n-library-translation": "*",
25
+ "@trackunit/react-graphql-hooks": "*"
25
26
  },
26
27
  "module": "./index.esm.js",
27
28
  "main": "./index.cjs.js"
package/src/Table.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import { Table as ReactTable, Row } from "@tanstack/react-table";
3
3
  import { CommonProps } from "@trackunit/react-components";
4
- import { RelayPagination } from "./types";
4
+ import { RelayPagination } from "@trackunit/react-graphql-hooks";
5
5
  export interface TableProps<TData extends object> extends ReactTable<TData>, CommonProps {
6
6
  pagination: RelayPagination;
7
7
  headerLeftActions?: React.ReactNode;
package/src/index.d.ts CHANGED
@@ -5,7 +5,6 @@ export * from "./menus/ColumnFilter";
5
5
  export * from "./menus/RowSpacing";
6
6
  export * from "./menus/Sorting";
7
7
  export * from "./types";
8
- export * from "./useRelayPagination";
9
8
  export * from "./useTable";
10
9
  export * from "./useTableSelection";
11
10
  export * from "./utils";
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import { Column, ColumnOrderState, Updater } from "@tanstack/react-table";
3
- export interface IColumnFilterProps<T extends object, V> {
4
- columns: Column<T, V>[];
3
+ export interface ColumnFilterProps<TColumnFilter extends object, TColumnFilterValue> {
4
+ columns: Column<TColumnFilter, TColumnFilterValue>[];
5
5
  defaultColumnOrder: ColumnOrderState;
6
6
  columnOrder?: ColumnOrderState;
7
7
  className?: string;
@@ -11,14 +11,14 @@ export interface IColumnFilterProps<T extends object, V> {
11
11
  /**
12
12
  * ColumnFilter component for managing visibility and order of table columns.
13
13
  *
14
- * @template T - The type representing the data model associated with the columns.
15
- * @template V - The type representing the value of columns.
16
- * @param {IColumnFilterProps<T, V>} props - The props object containing necessary properties.
14
+ * @template TColumnFilter - The type representing the data model associated with the columns.
15
+ * @template TColumnFilterValue - The type representing the value of columns.
16
+ * @param {ColumnFilterProps<TColumnFilter, TColumnFilterValue>} props - The props object containing necessary properties.
17
17
  * @returns {JSX.Element | null} A React JSX element representing the ColumnFilter component or null if columns are not provided.
18
18
  */
19
- export declare const ColumnFilter: <T extends Object, V>({ columns, setColumnOrder, defaultColumnOrder, columnOrder, onUserEvent, }: IColumnFilterProps<T, V>) => JSX.Element | null;
20
- export interface ColumnFiltersDragAndDropProps<T extends object, V> {
21
- columns: Column<T, V>[];
19
+ export declare const ColumnFilter: <TColumnFilter extends Object, TColumnFilterValue>({ columns, setColumnOrder, defaultColumnOrder, columnOrder, onUserEvent, }: ColumnFilterProps<TColumnFilter, TColumnFilterValue>) => JSX.Element | null;
20
+ export interface ColumnFiltersDragAndDropProps<TColumnFiltersDragAndDrop extends object, TColumnFiltersDragAndDropValue> {
21
+ columns: Column<TColumnFiltersDragAndDrop, TColumnFiltersDragAndDropValue>[];
22
22
  setColumnOrder: (updater: Updater<ColumnOrderState>) => void;
23
23
  onUserEvent?: (event: "Column Reordering" | "Column Filter", payload: Record<string, unknown>) => void;
24
24
  }
@@ -1,15 +1,15 @@
1
1
  /// <reference types="react" />
2
2
  import { Column } from "@tanstack/react-table";
3
- interface SortingProps<T extends object, V> {
4
- columns: Column<T, V>[];
3
+ interface SortingProps<TSorting extends object, TSortingValue> {
4
+ columns: Column<TSorting, TSortingValue>[];
5
5
  }
6
6
  /**
7
7
  * Sorting component for managing table column sorting.
8
8
  *
9
- * @template T - The type representing the data model associated with the columns.
10
- * @template V - The type representing the value of columns.
11
- * @param {SortingProps<T, V>} props - The props object containing sorting properties.
9
+ * @template TSorting - The type representing the data model associated with the columns.
10
+ * @template TSortingValue - The type representing the value of columns.
11
+ * @param {SortingProps<TSorting, TSortingValue>} props - The props object containing sorting properties.
12
12
  * @returns {JSX.Element | null} A React JSX element representing the Sorting component or null if there are no sortable columns.
13
13
  */
14
- export declare const Sorting: <T extends Object, V>({ columns }: SortingProps<T, V>) => JSX.Element | null;
14
+ export declare const Sorting: <TSorting extends Object, TSortingValue>({ columns, }: SortingProps<TSorting, TSortingValue>) => JSX.Element | null;
15
15
  export {};
package/src/types.d.ts CHANGED
@@ -9,17 +9,4 @@ declare module "@tanstack/react-table" {
9
9
  isCustomField?: boolean;
10
10
  }
11
11
  }
12
- export interface RelayPageInfo {
13
- count?: number | null;
14
- endCursor?: string | null;
15
- hasNextPage?: boolean;
16
- hasPreviousPage?: boolean;
17
- startCursor?: string | null;
18
- }
19
- export interface RelayPagination {
20
- nextPage: () => void;
21
- previousPage: () => void;
22
- pageInfo?: RelayPageInfo;
23
- isLoading: boolean;
24
- }
25
12
  export type Alignment = "left" | "center" | "right";
@@ -1,6 +1,6 @@
1
1
  import { VirtualItem } from "@tanstack/react-virtual";
2
+ import { RelayPagination } from "@trackunit/react-graphql-hooks";
2
3
  import { RefObject } from "react";
3
- import { RelayPagination } from "./types";
4
4
  interface InfiniteScrollProps {
5
5
  pagination: RelayPagination;
6
6
  containerRef: RefObject<HTMLDivElement>;
@@ -1,6 +1,6 @@
1
1
  import { ColumnDef, RowSelectionState } from "@tanstack/react-table";
2
2
  import { Dispatch, SetStateAction } from "react";
3
- type selectableTableData = {
3
+ export type selectableTableData = {
4
4
  id: string;
5
5
  } & object;
6
6
  export interface TableSelectionReturn<TData extends selectableTableData> {
@@ -21,7 +21,7 @@ export interface TableSelectionReturn<TData extends selectableTableData> {
21
21
  selectionTableProps: {
22
22
  onRowSelectionChange: Dispatch<SetStateAction<RowSelectionState>>;
23
23
  getRowId: (row: TData) => TData["id"];
24
- enableRowSelection: true;
24
+ enableRowSelection: boolean;
25
25
  };
26
26
  /**
27
27
  * A function to update the row selection state.
@@ -39,8 +39,22 @@ export interface TableSelectionReturn<TData extends selectableTableData> {
39
39
  toggleRowSelectionState: (id: TData["id"]) => void;
40
40
  }
41
41
  export interface TableSelectionProps<TData extends selectableTableData> {
42
+ /**
43
+ * The data that is displayed in the table.
44
+ * This must have an `id` field, to enable selection.
45
+ * The same data should be passed to the `data` prop of the `useTable` Hook.
46
+ */
42
47
  data: TData[];
48
+ /**
49
+ * An array of ids of the rows that should be selected by default.
50
+ * This is useful when you want to preselect rows, for example when editing an existing entity.
51
+ */
43
52
  defaultSelectedIds?: TData["id"][];
53
+ /**
54
+ * Whether or not to enable row selection.
55
+ * If set to `false`, the selection column will still be displayed, but the checkboxes will be disabled.
56
+ */
57
+ enableRowSelection?: boolean;
44
58
  }
45
59
  /**
46
60
  * `useTableSelection` is a custom hook that provides functionality for row selection in a table.
@@ -69,5 +83,4 @@ export interface TableSelectionProps<TData extends selectableTableData> {
69
83
  * columns,
70
84
  * });
71
85
  */
72
- export declare const useTableSelection: <TData extends selectableTableData>({ data, defaultSelectedIds, }: TableSelectionProps<TData>) => TableSelectionReturn<TData>;
73
- export {};
86
+ export declare const useTableSelection: <TData extends selectableTableData>({ data, defaultSelectedIds, enableRowSelection, }: TableSelectionProps<TData>) => TableSelectionReturn<TData>;
@@ -0,0 +1,11 @@
1
+ import { TableSelectionProps, selectableTableData } from "./useTableSelection";
2
+ export interface UseTableSelectionDemoComponentProps<TData extends selectableTableData> extends TableSelectionProps<TData> {
3
+ }
4
+ /**
5
+ * The `useTableSelection` Hook provides functionality for row selection in a table.
6
+ *
7
+ * It returns an object containing methods and values related to row selection.
8
+ *
9
+ * It Also returns a `selectionColumn` object that can be used as a column definition in a table.
10
+ */
11
+ export declare const UseTableSelectionDemoComponent: <TData extends selectableTableData>(props: UseTableSelectionDemoComponentProps<TData>) => JSX.Element;
@@ -1,29 +0,0 @@
1
- import { Dispatch, SetStateAction } from "react";
2
- import { RelayPageInfo, RelayPagination } from "./types";
3
- export interface RelayPaginationProps {
4
- pageSize?: number;
5
- onReset?: () => void;
6
- }
7
- export interface RelayPaginationQueryVariables {
8
- first?: number | null;
9
- last?: number | null;
10
- before?: string | null;
11
- after?: string | null;
12
- }
13
- export interface RelayTableSupport extends RelayPagination {
14
- isLoading: boolean;
15
- setIsLoading: Dispatch<SetStateAction<boolean>>;
16
- reset: () => void;
17
- setPageInfo: Dispatch<SetStateAction<RelayPageInfo | null | undefined>>;
18
- }
19
- export interface RelayPaginationSupport {
20
- variables: RelayPaginationQueryVariables;
21
- table: RelayTableSupport;
22
- }
23
- /**
24
- * Custom hook for handling Relay pagination in tables.
25
- *
26
- * @param {RelayPaginationProps} props - The props object containing pagination configuration.
27
- * @returns {RelayPaginationSupport} An object containing functions and state for managing Relay pagination.
28
- */
29
- export declare const useRelayPagination: (props?: RelayPaginationProps) => RelayPaginationSupport;