refine-mantine 1.2.0 → 1.2.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 (4) hide show
  1. package/dist/index.js +14 -18
  2. package/package.json +1 -1
  3. package/src/components/table/Table.story.tsx +25 -3
  4. package/src/components/table/Table.tsx +41 -43
package/dist/index.js CHANGED
@@ -1077,26 +1077,22 @@ const ColumnSorter = (p) => {
1077
1077
 
1078
1078
  //#endregion
1079
1079
  //#region src/components/table/Table.tsx
1080
- const Table = ({ props, tableProps }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Table$1.ScrollContainer, {
1081
- minWidth: 500,
1082
- children: /* @__PURE__ */ jsxs(Table$1, {
1083
- highlightOnHover: true,
1084
- ...tableProps,
1085
- children: [/* @__PURE__ */ jsx(Table$1.Thead, { children: props.reactTable.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(Table$1.Tr, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(Table$1.Th, {
1086
- colSpan: header.colSpan,
1087
- rowSpan: header.rowSpan,
1088
- style: { width: header.getSize() },
1089
- children: !header.isPlaceholder && /* @__PURE__ */ jsxs(Group, {
1080
+ const Table = ({ props, tableProps }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Table$1, {
1081
+ ...tableProps,
1082
+ children: [/* @__PURE__ */ jsx(Table$1.Thead, { children: props.reactTable.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(Table$1.Tr, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(Table$1.Th, {
1083
+ colSpan: header.colSpan,
1084
+ rowSpan: header.rowSpan,
1085
+ style: { width: header.getSize() },
1086
+ children: !header.isPlaceholder && /* @__PURE__ */ jsxs(Group, {
1087
+ gap: "xs",
1088
+ wrap: "nowrap",
1089
+ children: [/* @__PURE__ */ jsx(Box, { children: flexRender(header.column.columnDef.header, header.getContext()) }), /* @__PURE__ */ jsxs(Group, {
1090
1090
  gap: "xs",
1091
1091
  wrap: "nowrap",
1092
- children: [/* @__PURE__ */ jsx(Box, { children: flexRender(header.column.columnDef.header, header.getContext()) }), /* @__PURE__ */ jsxs(Group, {
1093
- gap: "xs",
1094
- wrap: "nowrap",
1095
- children: [/* @__PURE__ */ jsx(ColumnSorter, { column: header.column }), /* @__PURE__ */ jsx(ColumnFilter, { column: header.column })]
1096
- })]
1097
- })
1098
- }, header.id)) }, headerGroup.id)) }), /* @__PURE__ */ jsx(Table$1.Tbody, { children: props.reactTable.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(Table$1.Tr, { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(Table$1.Td, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) })]
1099
- })
1092
+ children: [/* @__PURE__ */ jsx(ColumnSorter, { column: header.column }), /* @__PURE__ */ jsx(ColumnFilter, { column: header.column })]
1093
+ })]
1094
+ })
1095
+ }, header.id)) }, headerGroup.id)) }), /* @__PURE__ */ jsx(Table$1.Tbody, { children: props.reactTable.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(Table$1.Tr, { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(Table$1.Td, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) })]
1100
1096
  }), /* @__PURE__ */ jsx(Group, {
1101
1097
  justify: "flex-end",
1102
1098
  mt: "xl",
package/package.json CHANGED
@@ -87,5 +87,5 @@
87
87
  "dependencies": {
88
88
  "@refinedev/ui-types": "^2.0.1"
89
89
  },
90
- "version": "1.2.0"
90
+ "version": "1.2.1"
91
91
  }
package/src/components/table/Table.story.tsx CHANGED
@@ -3,7 +3,7 @@ import { type CrudOperators, useSelect } from "@refinedev/core";
3
3
  import { useTable } from "@refinedev/react-table";
4
4
  import type { Meta } from "@storybook/react";
5
5
  import type { ColumnDef } from "@tanstack/react-table";
6
- import { useCallback, useMemo } from "react";
6
+ import { use, useCallback, useMemo } from "react";
7
7
  import { Table } from "./Table";
8
8
 
9
9
  export default {
@@ -29,8 +29,8 @@ interface CategoryRecord {
29
29
 
30
30
  type ProductRecordKey = keyof ProductRecord;
31
31
 
32
- export const Default = () => {
33
- const categories = useSelect<CategoryRecord>({
32
+ const useTableProps = () => {
33
+ const categories = useSelect<CategoryRecord>({
34
34
  resource: "categories",
35
35
  optionLabel: category => category.title,
36
36
  optionValue: category => category.id.toString(),
@@ -139,7 +139,29 @@ export const Default = () => {
139
139
  columns,
140
140
  });
141
141
 
142
+ return tableProps;
143
+ }
144
+
145
+ export const Default = () => {
146
+ const tableProps = useTableProps();
147
+
142
148
  return (
143
149
  <Table props={tableProps} />
144
150
  );
145
151
  }
152
+
153
+ export const Striped = () => {
154
+ const tableProps = useTableProps();
155
+
156
+ return (
157
+ <Table props={tableProps} tableProps={{ striped: true }} />
158
+ );
159
+ }
160
+
161
+ export const StickyHeader = () => {
162
+ const tableProps = useTableProps();
163
+
164
+ return (
165
+ <Table props={tableProps} tableProps={{ stickyHeader: true }} />
166
+ );
167
+ }
package/src/components/table/Table.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Box, Group, Table as MantineTable, Pagination, TableProps } from "@mantine/core";
1
+ import { Box, Group, Table as MantineTable, Pagination, TableProps, TableScrollContainerProps } from "@mantine/core";
2
2
  import type { BaseRecord, HttpError } from "@refinedev/core";
3
3
  import type { UseTableReturnType } from "@refinedev/react-table";
4
4
  import { flexRender } from "@tanstack/react-table";
@@ -16,50 +16,48 @@ export const Table = <
16
16
  tableProps?: TableProps;
17
17
  }) => (
18
18
  <>
19
- <MantineTable.ScrollContainer minWidth={500}>
20
- <MantineTable highlightOnHover {...tableProps}>
21
- <MantineTable.Thead>
22
- {props.reactTable.getHeaderGroups().map((headerGroup) => (
23
- <MantineTable.Tr key={headerGroup.id}>
24
- {headerGroup.headers.map((header) => (
25
- <MantineTable.Th
26
- key={header.id}
27
- colSpan={header.colSpan}
28
- rowSpan={header.rowSpan}
29
- style={{width: header.getSize()}}
30
- >
31
- {!header.isPlaceholder && (
19
+ <MantineTable {...tableProps}>
20
+ <MantineTable.Thead>
21
+ {props.reactTable.getHeaderGroups().map((headerGroup) => (
22
+ <MantineTable.Tr key={headerGroup.id}>
23
+ {headerGroup.headers.map((header) => (
24
+ <MantineTable.Th
25
+ key={header.id}
26
+ colSpan={header.colSpan}
27
+ rowSpan={header.rowSpan}
28
+ style={{width: header.getSize()}}
29
+ >
30
+ {!header.isPlaceholder && (
31
+ <Group gap="xs" wrap="nowrap">
32
+ <Box>
33
+ {flexRender(
34
+ header.column.columnDef.header,
35
+ header.getContext(),
36
+ )}
37
+ </Box>
32
38
  <Group gap="xs" wrap="nowrap">
33
- <Box>
34
- {flexRender(
35
- header.column.columnDef.header,
36
- header.getContext(),
37
- )}
38
- </Box>
39
- <Group gap="xs" wrap="nowrap">
40
- <ColumnSorter column={header.column} />
41
- <ColumnFilter column={header.column} />
42
- </Group>
39
+ <ColumnSorter column={header.column} />
40
+ <ColumnFilter column={header.column} />
43
41
  </Group>
44
- )}
45
- </MantineTable.Th>
46
- ))}
47
- </MantineTable.Tr>
48
- ))}
49
- </MantineTable.Thead>
50
- <MantineTable.Tbody>
51
- {props.reactTable.getRowModel().rows.map((row) => (
52
- <MantineTable.Tr key={row.id}>
53
- {row.getVisibleCells().map((cell) => (
54
- <MantineTable.Td key={cell.id}>
55
- {flexRender(cell.column.columnDef.cell, cell.getContext())}
56
- </MantineTable.Td>
57
- ))}
58
- </MantineTable.Tr>
59
- ))}
60
- </MantineTable.Tbody>
61
- </MantineTable>
62
- </MantineTable.ScrollContainer>
42
+ </Group>
43
+ )}
44
+ </MantineTable.Th>
45
+ ))}
46
+ </MantineTable.Tr>
47
+ ))}
48
+ </MantineTable.Thead>
49
+ <MantineTable.Tbody>
50
+ {props.reactTable.getRowModel().rows.map((row) => (
51
+ <MantineTable.Tr key={row.id}>
52
+ {row.getVisibleCells().map((cell) => (
53
+ <MantineTable.Td key={cell.id}>
54
+ {flexRender(cell.column.columnDef.cell, cell.getContext())}
55
+ </MantineTable.Td>
56
+ ))}
57
+ </MantineTable.Tr>
58
+ ))}
59
+ </MantineTable.Tbody>
60
+ </MantineTable>
63
61
  <Group justify="flex-end" mt="xl">
64
62
  <Pagination
65
63
  total={props.refineCore.pageCount}