material-react-table 0.26.3 → 0.26.4
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/dist/MaterialReactTable.d.ts +2 -1
- package/dist/material-react-table.cjs.development.js +13 -10
- package/dist/material-react-table.cjs.development.js.map +1 -1
- package/dist/material-react-table.cjs.production.min.js +1 -1
- package/dist/material-react-table.cjs.production.min.js.map +1 -1
- package/dist/material-react-table.esm.js +13 -10
- package/dist/material-react-table.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/MaterialReactTable.tsx +3 -0
- package/src/column.utils.ts +9 -3
- package/src/head/MRT_TableHeadCell.tsx +10 -2
- package/src/head/MRT_TableHeadCellFilterLabel.tsx +2 -2
- package/src/inputs/MRT_FilterTextField.tsx +4 -4
package/package.json
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
{
|
2
|
-
"version": "0.26.
|
2
|
+
"version": "0.26.4",
|
3
3
|
"license": "MIT",
|
4
4
|
"name": "material-react-table",
|
5
5
|
"description": "A fully featured Material UI implementation of TanStack React Table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
|
@@ -712,6 +712,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
|
|
712
712
|
onShowGlobalFilterChange?: OnChangeFn<boolean>;
|
713
713
|
onTableInstanceChange?: (table: MRT_TableInstance<TData>) => void;
|
714
714
|
positionActionsColumn?: 'first' | 'last';
|
715
|
+
positionExpandColumn?: 'first' | 'last';
|
715
716
|
positionGlobalFilter?: 'left' | 'right';
|
716
717
|
positionPagination?: 'bottom' | 'top' | 'both';
|
717
718
|
positionToolbarAlertBanner?: 'bottom' | 'top';
|
@@ -816,6 +817,7 @@ export default <TData extends Record<string, any> = {}>({
|
|
816
817
|
icons,
|
817
818
|
localization,
|
818
819
|
positionActionsColumn = 'first',
|
820
|
+
positionExpandColumn = 'first',
|
819
821
|
positionGlobalFilter = 'right',
|
820
822
|
positionPagination = 'bottom',
|
821
823
|
positionToolbarAlertBanner = 'top',
|
@@ -858,6 +860,7 @@ export default <TData extends Record<string, any> = {}>({
|
|
858
860
|
icons={{ ...MRT_Default_Icons, ...icons }}
|
859
861
|
localization={{ ...MRT_DefaultLocalization_EN, ...localization }}
|
860
862
|
positionActionsColumn={positionActionsColumn}
|
863
|
+
positionExpandColumn={positionExpandColumn}
|
861
864
|
positionGlobalFilter={positionGlobalFilter}
|
862
865
|
positionPagination={positionPagination}
|
863
866
|
positionToolbarAlertBanner={positionToolbarAlertBanner}
|
package/src/column.utils.ts
CHANGED
@@ -87,9 +87,10 @@ export const getLeadingDisplayColumnIds = <
|
|
87
87
|
((props.positionActionsColumn === 'first' && props.enableRowActions) ||
|
88
88
|
(props.enableEditing && props.editingMode === 'row')) &&
|
89
89
|
'mrt-row-actions',
|
90
|
-
|
91
|
-
props.
|
92
|
-
|
90
|
+
props.positionExpandColumn === 'first' &&
|
91
|
+
(props.enableExpanding ||
|
92
|
+
props.enableGrouping ||
|
93
|
+
props.renderDetailPanel) &&
|
93
94
|
'mrt-row-expand',
|
94
95
|
props.enableRowSelection && 'mrt-row-select',
|
95
96
|
props.enableRowNumbers && 'mrt-row-numbers',
|
@@ -103,6 +104,11 @@ export const getTrailingDisplayColumnIds = <
|
|
103
104
|
((props.positionActionsColumn === 'last' && props.enableRowActions) ||
|
104
105
|
(props.enableEditing && props.editingMode === 'row')) &&
|
105
106
|
'mrt-row-actions',
|
107
|
+
props.positionExpandColumn === 'last' &&
|
108
|
+
(props.enableExpanding ||
|
109
|
+
props.enableGrouping ||
|
110
|
+
props.renderDetailPanel) &&
|
111
|
+
'mrt-row-expand',
|
106
112
|
];
|
107
113
|
|
108
114
|
export const getDefaultColumnOrderIds = <
|
@@ -177,7 +177,12 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
|
|
177
177
|
alignItems: 'flex-start',
|
178
178
|
display: 'flex',
|
179
179
|
justifyContent:
|
180
|
-
|
180
|
+
tableCellProps?.align === 'right'
|
181
|
+
? 'flex-end'
|
182
|
+
: columnDefType === 'group' ||
|
183
|
+
tableCellProps?.align === 'center'
|
184
|
+
? 'center'
|
185
|
+
: 'space-between',
|
181
186
|
position: 'relative',
|
182
187
|
width: '100%',
|
183
188
|
}}
|
@@ -193,7 +198,10 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
|
|
193
198
|
display: 'flex',
|
194
199
|
flexWrap: 'nowrap',
|
195
200
|
m: tableCellProps?.align === 'center' ? 'auto' : undefined,
|
196
|
-
pl:
|
201
|
+
pl:
|
202
|
+
tableCellProps?.align === 'center' && column.getCanSort()
|
203
|
+
? '1rem'
|
204
|
+
: undefined,
|
197
205
|
whiteSpace:
|
198
206
|
(columnDef.header?.length ?? 0) < 24 ? 'nowrap' : 'normal',
|
199
207
|
}}
|
@@ -27,8 +27,8 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({ header, table }) => {
|
|
27
27
|
// @ts-ignore
|
28
28
|
localization[
|
29
29
|
`filter${
|
30
|
-
currentFilterOption
|
31
|
-
currentFilterOption
|
30
|
+
currentFilterOption?.charAt(0)?.toUpperCase() +
|
31
|
+
currentFilterOption?.slice(1)
|
32
32
|
}`
|
33
33
|
],
|
34
34
|
)
|
@@ -134,8 +134,8 @@ export const MRT_FilterTextField: FC<Props> = ({
|
|
134
134
|
? //@ts-ignore
|
135
135
|
localization[
|
136
136
|
`filter${
|
137
|
-
currentFilterOption
|
138
|
-
currentFilterOption
|
137
|
+
currentFilterOption?.charAt(0)?.toUpperCase() +
|
138
|
+
currentFilterOption?.slice(1)
|
139
139
|
}`
|
140
140
|
]
|
141
141
|
: '';
|
@@ -183,8 +183,8 @@ export const MRT_FilterTextField: FC<Props> = ({
|
|
183
183
|
// @ts-ignore
|
184
184
|
localization[
|
185
185
|
`filter${
|
186
|
-
currentFilterOption
|
187
|
-
currentFilterOption
|
186
|
+
currentFilterOption?.charAt(0)?.toUpperCase() +
|
187
|
+
currentFilterOption?.slice(1)
|
188
188
|
}`
|
189
189
|
],
|
190
190
|
)}
|