@trackunit/react-table 0.0.211 → 0.0.214
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 +11 -11
- package/index.esm.js +11 -11
- package/package.json +1 -1
- package/src/menus/ColumnFilter.d.ts +8 -8
- package/src/menus/Sorting.d.ts +6 -6
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
|
|
409
|
-
* @template
|
|
410
|
-
* @param {
|
|
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
|
|
562
|
-
* @template
|
|
563
|
-
* @param {SortingProps<
|
|
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());
|
|
@@ -601,7 +601,7 @@ const useRelayPagination = (props = { pageSize: 50 }) => {
|
|
|
601
601
|
const nextPage = React.useCallback(() => {
|
|
602
602
|
if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasNextPage) {
|
|
603
603
|
setVariables({
|
|
604
|
-
after:
|
|
604
|
+
after: pageInfo.endCursor === null ? undefined : pageInfo.endCursor,
|
|
605
605
|
first: props.pageSize,
|
|
606
606
|
});
|
|
607
607
|
}
|
|
@@ -609,7 +609,7 @@ const useRelayPagination = (props = { pageSize: 50 }) => {
|
|
|
609
609
|
const previousPage = React.useCallback(() => {
|
|
610
610
|
if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasPreviousPage) {
|
|
611
611
|
setVariables({
|
|
612
|
-
before:
|
|
612
|
+
before: pageInfo.startCursor === null ? undefined : pageInfo.startCursor,
|
|
613
613
|
last: props.pageSize,
|
|
614
614
|
});
|
|
615
615
|
}
|
|
@@ -624,8 +624,9 @@ const useRelayPagination = (props = { pageSize: 50 }) => {
|
|
|
624
624
|
if (props.onReset) {
|
|
625
625
|
props.onReset();
|
|
626
626
|
}
|
|
627
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
627
628
|
}, [props.onReset, props.pageSize]);
|
|
628
|
-
|
|
629
|
+
return React.useMemo(() => {
|
|
629
630
|
return {
|
|
630
631
|
variables,
|
|
631
632
|
table: {
|
|
@@ -639,7 +640,6 @@ const useRelayPagination = (props = { pageSize: 50 }) => {
|
|
|
639
640
|
},
|
|
640
641
|
};
|
|
641
642
|
}, [variables, nextPage, previousPage, isLoading, reset, pageInfo]);
|
|
642
|
-
return pagination;
|
|
643
643
|
};
|
|
644
644
|
|
|
645
645
|
/**
|
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
|
|
384
|
-
* @template
|
|
385
|
-
* @param {
|
|
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
|
|
537
|
-
* @template
|
|
538
|
-
* @param {SortingProps<
|
|
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());
|
|
@@ -576,7 +576,7 @@ const useRelayPagination = (props = { pageSize: 50 }) => {
|
|
|
576
576
|
const nextPage = useCallback(() => {
|
|
577
577
|
if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasNextPage) {
|
|
578
578
|
setVariables({
|
|
579
|
-
after:
|
|
579
|
+
after: pageInfo.endCursor === null ? undefined : pageInfo.endCursor,
|
|
580
580
|
first: props.pageSize,
|
|
581
581
|
});
|
|
582
582
|
}
|
|
@@ -584,7 +584,7 @@ const useRelayPagination = (props = { pageSize: 50 }) => {
|
|
|
584
584
|
const previousPage = useCallback(() => {
|
|
585
585
|
if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasPreviousPage) {
|
|
586
586
|
setVariables({
|
|
587
|
-
before:
|
|
587
|
+
before: pageInfo.startCursor === null ? undefined : pageInfo.startCursor,
|
|
588
588
|
last: props.pageSize,
|
|
589
589
|
});
|
|
590
590
|
}
|
|
@@ -599,8 +599,9 @@ const useRelayPagination = (props = { pageSize: 50 }) => {
|
|
|
599
599
|
if (props.onReset) {
|
|
600
600
|
props.onReset();
|
|
601
601
|
}
|
|
602
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
602
603
|
}, [props.onReset, props.pageSize]);
|
|
603
|
-
|
|
604
|
+
return useMemo(() => {
|
|
604
605
|
return {
|
|
605
606
|
variables,
|
|
606
607
|
table: {
|
|
@@ -614,7 +615,6 @@ const useRelayPagination = (props = { pageSize: 50 }) => {
|
|
|
614
615
|
},
|
|
615
616
|
};
|
|
616
617
|
}, [variables, nextPage, previousPage, isLoading, reset, pageInfo]);
|
|
617
|
-
return pagination;
|
|
618
618
|
};
|
|
619
619
|
|
|
620
620
|
/**
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Column, ColumnOrderState, Updater } from "@tanstack/react-table";
|
|
3
|
-
export interface
|
|
4
|
-
columns: Column<
|
|
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
|
|
15
|
-
* @template
|
|
16
|
-
* @param {
|
|
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: <
|
|
20
|
-
export interface ColumnFiltersDragAndDropProps<
|
|
21
|
-
columns: Column<
|
|
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
|
}
|
package/src/menus/Sorting.d.ts
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Column } from "@tanstack/react-table";
|
|
3
|
-
interface SortingProps<
|
|
4
|
-
columns: Column<
|
|
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
|
|
10
|
-
* @template
|
|
11
|
-
* @param {SortingProps<
|
|
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: <
|
|
14
|
+
export declare const Sorting: <TSorting extends Object, TSortingValue>({ columns, }: SortingProps<TSorting, TSortingValue>) => JSX.Element | null;
|
|
15
15
|
export {};
|