material-react-table 0.26.3 → 0.26.4
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
)}
|