Skip to content

Commit ccc439c

Browse files
jeradrutnamjeradrutnam
committed
Fix some issue in ListingTable DataGrid variant
1 parent 41271a4 commit ccc439c

3 files changed

Lines changed: 60 additions & 52 deletions

File tree

‎packages/oxygen-ui/src/components/ListingTable/ListingTable/ListingTableDataGrid.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ export function ListingTableDataGrid({
122122
density: densityProp,
123123
loading: loadingProp,
124124
getRowSpacing: getRowSpacingProp,
125+
getRowHeight: getRowHeightProp,
125126
filterModel: filterModelProp,
126127
sx,
127128
...props
@@ -234,6 +235,7 @@ export function ListingTableDataGrid({
234235
loading={loading}
235236
filterModel={filterModel}
236237
getRowSpacing={variant === 'card' ? (getRowSpacingProp ?? defaultCardRowSpacing) : getRowSpacingProp}
238+
getRowHeight={variant === 'card' ? (getRowHeightProp ?? (() => 'auto' as const)) : getRowHeightProp}
237239
sx={mergedSx}
238240
{...props}
239241
/>

‎packages/oxygen-ui/src/components/PageContent/PageContent.tsx‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -72,14 +72,7 @@ const PageContentInner = styled(Box, {
7272
slot: 'Inner',
7373
shouldForwardProp: (prop) => prop !== 'maxWidth' && prop !== 'centered' && prop !== 'fullWidth' && prop !== 'noPadding',
7474
})<PageContentProps>(({ theme, maxWidth = '1400px', centered = true, fullWidth = false, noPadding = false }) => ({
75-
// Use fit-content so the inner container expands to accommodate children that have a
76-
// min-width (e.g. responsive data tables). minWidth: 100% ensures it still fills the
77-
// parent when the content is narrower, preserving the normal full-width layout.
78-
// Together these mean: width = max(100% of scroll-parent, intrinsic min-content).
79-
// When content exceeds the viewport, PageContentRoot (overflow:auto) shows a horizontal
80-
// scrollbar for the entire content area rather than only the inner table element.
81-
width: 'fit-content',
82-
minWidth: '100%',
75+
width: '100%',
8376
...(!fullWidth && { maxWidth }),
8477
...(centered && { marginLeft: 'auto', marginRight: 'auto' }),
8578
...(!noPadding && { padding: theme.spacing(8) }),

‎samples/oxygen-ui-test-app/src/pages/ProjectOverview.tsx‎

Lines changed: 57 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import {
3232
PageContent,
3333
ListingTable,
3434
Chip,
35+
DataGrid,
3536
} from '@wso2/oxygen-ui'
3637
import { LineChart } from '@wso2/oxygen-ui-charts-react'
3738
import { Clock, Plus, RefreshCw, Info, Link as LinkIcon } from '@wso2/oxygen-ui-icons-react'
@@ -176,28 +177,19 @@ export default function ProjectOverview(): JSX.Element {
176177
<Typography variant="h5" sx={{ fontWeight: 700, mb: 1 }}>
177178
API Proxies
178179
</Typography>
179-
<ListingTable.Container sx={{ width: '100%' }} disablePaper>
180-
<ListingTable variant="card" density="standard">
181-
<ListingTable.Head>
182-
<ListingTable.Row>
183-
<ListingTable.Cell>Name</ListingTable.Cell>
184-
<ListingTable.Cell>Description</ListingTable.Cell>
185-
<ListingTable.Cell>Type</ListingTable.Cell>
186-
<ListingTable.Cell align="right">Last Updated</ListingTable.Cell>
187-
</ListingTable.Row>
188-
</ListingTable.Head>
189-
190-
<ListingTable.Body>
191-
{mockComponents.map(component => (
192-
<ListingTable.Row
193-
key={component.id}
194-
variant="card"
195-
hover
196-
clickable
197-
onClick={() => navigate(`components/${component.id}`)}
198-
>
199-
<ListingTable.Cell>
180+
<ListingTable.Provider variant="data-grid-card">
181+
<ListingTable.Container disablePaper>
182+
<ListingTable.DataGrid
183+
rows={mockComponents}
184+
columns={[
185+
{
186+
field: 'name',
187+
headerName: 'Name',
188+
flex: 1.5,
189+
minWidth: 220,
190+
renderCell: ({ row }: DataGrid.GridRenderCellParams<Component>) => (
200191
<ListingTable.CellIcon
192+
sx={{ width: '100%' }}
201193
icon={
202194
<Avatar
203195
sx={{
@@ -207,40 +199,61 @@ export default function ProjectOverview(): JSX.Element {
207199
color: 'text.primary',
208200
}}
209201
>
210-
{(component.name?.trim()?.[0] ?? 'A').toUpperCase()}
202+
{(row.name?.trim()?.[0] ?? 'A').toUpperCase()}
211203
</Avatar>
212204
}
213-
primary={component.name}
205+
primary={row.name}
214206
/>
215-
</ListingTable.Cell>
216-
217-
<ListingTable.Cell>
207+
),
208+
},
209+
{
210+
field: 'description',
211+
headerName: 'Description',
212+
flex: 2,
213+
minWidth: 200,
214+
renderCell: () => (
218215
<Typography
219216
variant="caption"
220217
color="text.secondary"
221218
sx={{
222219
overflow: 'hidden',
223220
textOverflow: 'ellipsis',
224221
whiteSpace: 'nowrap',
225-
maxWidth: 420,
226222
}}
227223
>
228224
This is a sample proxy that manages a list of reading items.
229225
</Typography>
230-
</ListingTable.Cell>
231-
232-
<ListingTable.Cell>
233-
<Chip label={component.type ?? 'HTTP'} size="small" variant="outlined" />
234-
</ListingTable.Cell>
235-
236-
<ListingTable.Cell align="right">
237-
<LastUpdatedCell value={component.lastModified} />
238-
</ListingTable.Cell>
239-
</ListingTable.Row>
240-
))}
241-
</ListingTable.Body>
242-
</ListingTable>
243-
</ListingTable.Container>
226+
),
227+
},
228+
{
229+
field: 'type',
230+
headerName: 'Type',
231+
width: 120,
232+
renderCell: ({ row }: DataGrid.GridRenderCellParams<Component>) => (
233+
<Chip label={row.type ?? 'HTTP'} size="small" variant="outlined" />
234+
),
235+
},
236+
{
237+
field: 'lastModified',
238+
headerName: 'Last Updated',
239+
width: 150,
240+
headerAlign: 'left',
241+
align: 'left',
242+
renderCell: ({ row }: DataGrid.GridRenderCellParams<Component>) => (
243+
<LastUpdatedCell value={row.lastModified} />
244+
),
245+
},
246+
] as DataGrid.GridColDef<Component>[]}
247+
onRowClick={params => navigate(`components/${(params.row as Component).id}`)}
248+
disableRowSelectionOnClick
249+
hideFooter
250+
sx={{
251+
height: 'auto',
252+
'& .MuiDataGrid-row': { cursor: 'pointer' },
253+
}}
254+
/>
255+
</ListingTable.Container>
256+
</ListingTable.Provider>
244257
</Box>
245258

246259
<Box sx={{ mb: 4 }}>
@@ -254,7 +267,7 @@ export default function ProjectOverview(): JSX.Element {
254267
<ListingTable.Row>
255268
<ListingTable.Cell>Name</ListingTable.Cell>
256269
<ListingTable.Cell>Description</ListingTable.Cell>
257-
<ListingTable.Cell>Last Updated</ListingTable.Cell>
270+
<ListingTable.Cell sx={{ maxWidth: 150 }}>Last Updated</ListingTable.Cell>
258271
</ListingTable.Row>
259272
</ListingTable.Head>
260273

@@ -300,8 +313,8 @@ export default function ProjectOverview(): JSX.Element {
300313
</Typography>
301314
</ListingTable.Cell>
302315

303-
<ListingTable.Cell>
304-
<Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
316+
<ListingTable.Cell sx={{ maxWidth: 150 }}>
317+
<Box sx={{ display: 'flex', justifyContent: 'flex-start' }}>
305318
<LastUpdatedCell value={server.timestamp} />
306319
</Box>
307320
</ListingTable.Cell>

0 commit comments

Comments
 (0)