@cwncollab-org/mui-component-kit 0.8.1 → 0.9.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/README.md
CHANGED
|
@@ -638,6 +638,97 @@ The Autocomplete component also accepts all standard MUI FormControl props excep
|
|
|
638
638
|
The `SubscribeAutocomplete` component has the same props as `Autocomplete` but automatically disables the field when the form is submitting, providing better UX during form submission.
|
|
639
639
|
|
|
640
640
|
|
|
641
|
+
### Material Router Table
|
|
642
|
+
|
|
643
|
+
The `useMaterialRouterTable` hook provides Material React Table integration with TanStack Router, enabling URL-synchronized table state including pagination, sorting, column visibility, and density settings.
|
|
644
|
+
|
|
645
|
+
```tsx
|
|
646
|
+
import { useMaterialRouterTable } from '@cwncollab-org/component-kit'
|
|
647
|
+
import { MaterialReactTable } from 'material-react-table'
|
|
648
|
+
import { createFileRoute } from '@tanstack/react-router'
|
|
649
|
+
|
|
650
|
+
const columns = [
|
|
651
|
+
{
|
|
652
|
+
header: 'Name',
|
|
653
|
+
accessorKey: 'name',
|
|
654
|
+
},
|
|
655
|
+
{
|
|
656
|
+
header: 'Email',
|
|
657
|
+
accessorKey: 'email',
|
|
658
|
+
},
|
|
659
|
+
{
|
|
660
|
+
header: 'Role',
|
|
661
|
+
accessorKey: 'role',
|
|
662
|
+
},
|
|
663
|
+
]
|
|
664
|
+
|
|
665
|
+
const data = [
|
|
666
|
+
{ name: 'John Doe', email: 'john@example.com', role: 'Admin' },
|
|
667
|
+
{ name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
|
|
668
|
+
// ... more data
|
|
669
|
+
]
|
|
670
|
+
|
|
671
|
+
function RouteComponent() {
|
|
672
|
+
const table = useMaterialRouterTable({
|
|
673
|
+
columns,
|
|
674
|
+
data,
|
|
675
|
+
initialState: {
|
|
676
|
+
columnVisibility: {
|
|
677
|
+
role: false, // Hide role column by default
|
|
678
|
+
},
|
|
679
|
+
pagination: {
|
|
680
|
+
pageIndex: 0,
|
|
681
|
+
pageSize: 20
|
|
682
|
+
},
|
|
683
|
+
density: 'compact',
|
|
684
|
+
},
|
|
685
|
+
})
|
|
686
|
+
|
|
687
|
+
return <MaterialReactTable table={table} />
|
|
688
|
+
}
|
|
689
|
+
|
|
690
|
+
export const Route = createFileRoute('/users')({
|
|
691
|
+
component: RouteComponent,
|
|
692
|
+
})
|
|
693
|
+
```
|
|
694
|
+
|
|
695
|
+
#### useMaterialRouterTable Arguments
|
|
696
|
+
|
|
697
|
+
The hook accepts a single argument of type `MRT_TableOptions<TData>` with the following key properties:
|
|
698
|
+
|
|
699
|
+
| Property | Type | Description |
|
|
700
|
+
|----------|------|-------------|
|
|
701
|
+
| `columns` | `MRT_ColumnDef<TData>[]` | Column definitions for the table |
|
|
702
|
+
| `data` | `TData[]` | Array of data objects to display |
|
|
703
|
+
| `initialState` | `object` | Initial table state configuration |
|
|
704
|
+
| `initialState.pagination` | `{ pageIndex: number, pageSize: number }` | Initial pagination settings |
|
|
705
|
+
| `initialState.columnVisibility` | `Record<string, boolean>` | Initial column visibility state |
|
|
706
|
+
| `initialState.density` | `'compact' \| 'comfortable' \| 'spacious'` | Initial table density |
|
|
707
|
+
| `initialState.sorting` | `Array<{ id: string, desc: boolean }>` | Initial sorting configuration |
|
|
708
|
+
| `onPaginationChange` | `(state: MRT_PaginationState) => void` | Optional pagination change handler |
|
|
709
|
+
| `onSortingChange` | `(state: MRT_SortingState) => void` | Optional sorting change handler |
|
|
710
|
+
| `onDensityChange` | `(state: MRT_DensityState) => void` | Optional density change handler |
|
|
711
|
+
| `onColumnVisibilityChange` | `(state: MRT_VisibilityState) => void` | Optional column visibility change handler |
|
|
712
|
+
|
|
713
|
+
**URL Synchronization:**
|
|
714
|
+
The hook automatically synchronizes the following table state with URL search parameters:
|
|
715
|
+
- `page` - Current page number (1-based in URL, 0-based internally)
|
|
716
|
+
- `pageSize` - Number of items per page
|
|
717
|
+
- `order` - Column ID for sorting
|
|
718
|
+
- `desc` - Sort direction (true for descending)
|
|
719
|
+
- `density` - Table density setting
|
|
720
|
+
- `columns` - Visible column keys (joined with `-`)
|
|
721
|
+
|
|
722
|
+
**Features:**
|
|
723
|
+
- **URL Persistence**: Table state is preserved in the URL and survives page refreshes
|
|
724
|
+
- **Browser Navigation**: Users can use back/forward buttons to navigate table states
|
|
725
|
+
- **Shareable URLs**: Table states can be shared via URL
|
|
726
|
+
- **Type Safety**: Full TypeScript support with generic data types
|
|
727
|
+
- **MRT Integration**: Seamless integration with Material React Table features
|
|
728
|
+
|
|
729
|
+
The hook returns a configured Material React Table instance that can be passed directly to the `MaterialReactTable` component.
|
|
730
|
+
|
|
731
|
+
|
|
641
732
|
### RadioGroup Component
|
|
642
733
|
|
|
643
734
|
The RadioGroup component provides radio button selection, built on top of MUI's FormControl and RadioGroup components and integrated with TanStack Form.
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { ValidateFromPath } from '@tanstack/react-router';
|
|
2
1
|
import { z } from 'zod';
|
|
3
2
|
import { MRT_RowData, type MRT_TableOptions } from 'material-react-table';
|
|
4
3
|
export declare const tableSearchSchema: z.ZodObject<{
|
|
@@ -14,5 +13,5 @@ export declare const tableSearchSchema: z.ZodObject<{
|
|
|
14
13
|
columns: z.ZodOptional<z.ZodPipe<z.ZodString, z.ZodTransform<string[], string>>>;
|
|
15
14
|
}, z.core.$strip>;
|
|
16
15
|
export type TableSearch = z.infer<typeof tableSearchSchema>;
|
|
17
|
-
export declare function useMaterialRouterTable<TData extends MRT_RowData>(
|
|
16
|
+
export declare function useMaterialRouterTable<TData extends MRT_RowData>(opts: MRT_TableOptions<TData>): import("material-react-table").MRT_TableInstance<TData>;
|
|
18
17
|
//# sourceMappingURL=materialRouterTableHooks.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"materialRouterTableHooks.d.ts","sourceRoot":"","sources":["../../src/lib/table/materialRouterTableHooks.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"materialRouterTableHooks.d.ts","sourceRoot":"","sources":["../../src/lib/table/materialRouterTableHooks.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAA;AACvB,OAAO,EAGL,WAAW,EAIX,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAA;AAM7B,eAAO,MAAM,iBAAiB;;;;;;;;;;;iBAU5B,CAAA;AAEF,MAAM,MAAM,WAAW,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,iBAAiB,CAAC,CAAA;AAE3D,wBAAgB,sBAAsB,CAAC,KAAK,SAAS,WAAW,EAC9D,IAAI,EAAE,gBAAgB,CAAC,KAAK,CAAC,2DAkK9B"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useEffect, useMemo, useState } from 'react';
|
|
2
|
-
import { useNavigate, useSearch
|
|
2
|
+
import { useNavigate, useSearch } from '@tanstack/react-router';
|
|
3
3
|
import { z } from 'zod';
|
|
4
4
|
import { useMaterialReactTable, } from 'material-react-table';
|
|
5
5
|
const defaultPageSize = 10;
|
|
@@ -16,11 +16,11 @@ export const tableSearchSchema = z.object({
|
|
|
16
16
|
.transform(val => val.split(searchColumnsSeparator))
|
|
17
17
|
.optional(),
|
|
18
18
|
});
|
|
19
|
-
export function useMaterialRouterTable(
|
|
19
|
+
export function useMaterialRouterTable(opts) {
|
|
20
20
|
const { onPaginationChange, onSortingChange, onDensityChange, onColumnVisibilityChange, state, ...rest } = opts;
|
|
21
21
|
const initialState = opts.initialState;
|
|
22
22
|
const originalSearch = useSearch({ strict: false });
|
|
23
|
-
const navigate = useNavigate({
|
|
23
|
+
const navigate = useNavigate({});
|
|
24
24
|
const search = tableSearchSchema.parse(originalSearch);
|
|
25
25
|
const initialPaginationState = {
|
|
26
26
|
pageIndex: initialState?.pagination?.pageIndex ?? 0,
|
|
@@ -37,7 +37,7 @@ export function useMaterialRouterTable(path, opts) {
|
|
|
37
37
|
.join(searchColumnsSeparator), [opts.columns, initialColumnVisibilityState]);
|
|
38
38
|
const searchPaginationState = {
|
|
39
39
|
pageIndex: search.page ? search.page - 1 : 0,
|
|
40
|
-
pageSize: search.pageSize ?? defaultPageSize,
|
|
40
|
+
pageSize: search.pageSize ?? initialPaginationState.pageSize ?? defaultPageSize,
|
|
41
41
|
};
|
|
42
42
|
const searchDensityState = search.density ?? initialDensityState;
|
|
43
43
|
const searchSortingState = search.order
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"materialRouterTableHooks.js","sourceRoot":"","sources":["../../src/lib/table/materialRouterTableHooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,
|
|
1
|
+
{"version":3,"file":"materialRouterTableHooks.js","sourceRoot":"","sources":["../../src/lib/table/materialRouterTableHooks.ts"],"names":[],"mappings":"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"}
|