Skip to content

Commit 1076338

Browse files
marrouchimarrouchi
authored
Merge pull request #1402 from Hexastack/1401-issue---the-prop-xs-of-grid-can-only-be-used-together-with-the-item-prop
fix(frontend): resolve grid missing item attribute
2 parents 699b464 + 1c7c122 commit 1076338

File tree

14 files changed

+103
-130
lines changed

14 files changed

+103
-130
lines changed

‎frontend/src/app-components/tables/DataGrid.tsx‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
77
*/
88

9-
import { useTheme } from "@mui/material";
9+
import { Grid, useTheme } from "@mui/material";
1010
import {
1111
DataGridProps,
1212
gridClasses,
@@ -81,22 +81,24 @@ export const DataGrid = <T extends GridValidRowModel = any>({
8181
} as Partial<GridSlotsComponent> | undefined);
8282

8383
return (
84-
<StyledDataGrid<T>
85-
autoHeight={autoHeight}
86-
disableRowSelectionOnClick={disableRowSelectionOnClick}
87-
slots={normalizedSlots}
88-
slotProps={{
89-
loadingOverlay: {
90-
variant: "skeleton",
91-
noRowsVariant: "skeleton",
92-
},
93-
}}
94-
showCellVerticalBorder={showCellVerticalBorder}
95-
showColumnVerticalBorder={showColumnVerticalBorder}
96-
sx={sx}
97-
columns={styledColumns}
98-
rows={rows}
99-
{...rest}
100-
/>
84+
<Grid xs={12} item>
85+
<StyledDataGrid<T>
86+
autoHeight={autoHeight}
87+
disableRowSelectionOnClick={disableRowSelectionOnClick}
88+
slots={normalizedSlots}
89+
slotProps={{
90+
loadingOverlay: {
91+
variant: "skeleton",
92+
noRowsVariant: "skeleton",
93+
},
94+
}}
95+
showCellVerticalBorder={showCellVerticalBorder}
96+
showColumnVerticalBorder={showColumnVerticalBorder}
97+
sx={sx}
98+
columns={styledColumns}
99+
rows={rows}
100+
{...rest}
101+
/>
102+
</Grid>
101103
);
102104
};

‎frontend/src/components/categories/index.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -174,14 +174,12 @@ export const Categories = () => {
174174
</Grid>
175175
</PageHeader>
176176
</Grid>
177-
<Grid xs={12}>
178-
<DataGrid
179-
columns={columns}
180-
{...dataGridProps}
181-
checkboxSelection
182-
onRowSelectionModelChange={handleSelectionChange}
183-
/>
184-
</Grid>
177+
<DataGrid
178+
columns={columns}
179+
{...dataGridProps}
180+
checkboxSelection
181+
onRowSelectionModelChange={handleSelectionChange}
182+
/>
185183
</Grid>
186184
);
187185
};

‎frontend/src/components/content-types/index.tsx‎

Lines changed: 30 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -117,39 +117,37 @@ export const ContentTypes = () => {
117117
/>
118118
</Grid>
119119
</PageHeader>
120-
<Grid xs={12}>
121-
<DataGrid
122-
{...dataGridProps}
123-
disableColumnFilter
124-
columns={[
125-
{ flex: 1, field: "name", headerName: t("label.name") },
126-
{
127-
maxWidth: 140,
128-
field: "createdAt",
129-
headerName: t("label.createdAt"),
130-
disableColumnMenu: true,
131-
renderHeader,
132-
resizable: false,
133-
headerAlign: "left",
134-
valueGetter: (params) =>
135-
t("datetime.created_at", getDateTimeFormatter(params)),
136-
},
137-
{
138-
maxWidth: 140,
139-
field: "updatedAt",
140-
headerName: t("label.updatedAt"),
141-
disableColumnMenu: true,
142-
renderHeader,
143-
resizable: false,
144-
headerAlign: "left",
145-
valueGetter: (params) =>
146-
t("datetime.updated_at", getDateTimeFormatter(params)),
147-
},
120+
<DataGrid
121+
{...dataGridProps}
122+
disableColumnFilter
123+
columns={[
124+
{ flex: 1, field: "name", headerName: t("label.name") },
125+
{
126+
maxWidth: 140,
127+
field: "createdAt",
128+
headerName: t("label.createdAt"),
129+
disableColumnMenu: true,
130+
renderHeader,
131+
resizable: false,
132+
headerAlign: "left",
133+
valueGetter: (params) =>
134+
t("datetime.created_at", getDateTimeFormatter(params)),
135+
},
136+
{
137+
maxWidth: 140,
138+
field: "updatedAt",
139+
headerName: t("label.updatedAt"),
140+
disableColumnMenu: true,
141+
renderHeader,
142+
resizable: false,
143+
headerAlign: "left",
144+
valueGetter: (params) =>
145+
t("datetime.updated_at", getDateTimeFormatter(params)),
146+
},
148147

149-
actionColumns,
150-
]}
151-
/>
152-
</Grid>
148+
actionColumns,
149+
]}
150+
/>
153151
</Grid>
154152
);
155153
};

‎frontend/src/components/context-vars/index.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -207,14 +207,12 @@ export const ContextVars = () => {
207207
/>
208208
</Grid>
209209
</PageHeader>
210-
<Grid xs={12}>
211-
<DataGrid
212-
columns={columns}
213-
{...dataGridProps}
214-
checkboxSelection
215-
onRowSelectionModelChange={handleSelectionChange}
216-
/>
217-
</Grid>
210+
<DataGrid
211+
columns={columns}
212+
{...dataGridProps}
213+
checkboxSelection
214+
onRowSelectionModelChange={handleSelectionChange}
215+
/>
218216
</Grid>
219217
);
220218
};

‎frontend/src/components/labels/index.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -216,14 +216,12 @@ export const Labels = () => {
216216
/>
217217
</Grid>
218218
</PageHeader>
219-
<Grid xs={12}>
220-
<DataGrid
221-
columns={columns}
222-
{...dataGridProps}
223-
checkboxSelection
224-
onRowSelectionModelChange={handleSelectionChange}
225-
/>
226-
</Grid>
219+
<DataGrid
220+
columns={columns}
221+
{...dataGridProps}
222+
checkboxSelection
223+
onRowSelectionModelChange={handleSelectionChange}
224+
/>
227225
</Grid>
228226
);
229227
};

‎frontend/src/components/languages/index.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -216,9 +216,7 @@ export const Languages = () => {
216216
) : null}
217217
</Grid>
218218
</PageHeader>
219-
<Grid xs={12}>
220-
<DataGrid columns={columns} {...dataGridProps} />
221-
</Grid>
219+
<DataGrid columns={columns} {...dataGridProps} />
222220
</Grid>
223221
);
224222
};

‎frontend/src/components/media-library/index.tsx‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88

99
import DriveFolderUploadIcon from "@mui/icons-material/DriveFolderUpload";
10-
import { Box, Grid, Paper } from "@mui/material";
10+
import { Box, Grid } from "@mui/material";
1111
import { GridColDef, GridEventListener } from "@mui/x-data-grid";
1212

1313
import AttachmentThumbnail from "@/app-components/attachment/AttachmentThumbnail";
@@ -152,19 +152,13 @@ export const MediaLibrary = ({ onSelect, accept }: MediaLibraryProps) => {
152152
</Grid>
153153
</Grid>
154154
</PageHeader>
155-
<Grid item xs={12}>
156-
<Paper sx={{ padding: 2 }}>
157-
<Grid>
158-
<DataGrid
159-
columns={columns}
160-
{...dataGridProps}
161-
disableRowSelectionOnClick={!onSelect}
162-
onRowClick={onSelect}
163-
rowHeight={86}
164-
/>
165-
</Grid>
166-
</Paper>
167-
</Grid>
155+
<DataGrid
156+
columns={columns}
157+
{...dataGridProps}
158+
disableRowSelectionOnClick={!onSelect}
159+
onRowClick={onSelect}
160+
rowHeight={86}
161+
/>
168162
</Grid>
169163
);
170164
};

‎frontend/src/components/nlp/components/NlpEntity.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -252,16 +252,14 @@ const NlpEntity = () => {
252252
]}
253253
/>
254254
</Grid>
255-
256-
<Grid mt={3}>
257-
<DataGrid
258-
columns={nlpEntityColumns}
259-
{...nlpEntityGrid}
260-
isRowSelectable={({ row }) => !row.builtin}
261-
checkboxSelection
262-
onRowSelectionModelChange={handleSelectionChange}
263-
/>
264-
</Grid>
255+
<DataGrid
256+
sx={{ mt: 3 }}
257+
columns={nlpEntityColumns}
258+
{...nlpEntityGrid}
259+
isRowSelectable={({ row }) => !row.builtin}
260+
checkboxSelection
261+
onRowSelectionModelChange={handleSelectionChange}
262+
/>
265263
</Grid>
266264
);
267265
};

‎frontend/src/components/nlp/components/NlpSample.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -442,15 +442,13 @@ export default function NlpSample() {
442442
/>
443443
</Grid>
444444
</Grid>
445-
446-
<Grid mt={3}>
447-
<DataGrid
448-
columns={columns}
449-
{...dataGridProps}
450-
checkboxSelection
451-
onRowSelectionModelChange={handleSelectionChange}
452-
/>
453-
</Grid>
445+
<DataGrid
446+
sx={{ mt: 3 }}
447+
columns={columns}
448+
{...dataGridProps}
449+
checkboxSelection
450+
onRowSelectionModelChange={handleSelectionChange}
451+
/>
454452
</Grid>
455453
);
456454
}

‎frontend/src/components/nlp/components/NlpValue.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -255,14 +255,13 @@ export const NlpValues = ({ entityId }: { entityId: string }) => {
255255
/>
256256
</Grid>
257257
</PageHeader>
258-
<Grid padding={1} marginTop={2} container>
259-
<DataGrid
260-
columns={columns}
261-
{...dataGridProps}
262-
checkboxSelection
263-
onRowSelectionModelChange={handleSelectionChange}
264-
/>
265-
</Grid>
258+
<DataGrid
259+
sx={{ mt: 3 }}
260+
columns={columns}
261+
{...dataGridProps}
262+
checkboxSelection
263+
onRowSelectionModelChange={handleSelectionChange}
264+
/>
266265
</Box>
267266
</Grid>
268267
</Slide>

0 commit comments

Comments
 (0)