Skip to content

Commit 4efa4a6

Browse files
fPolicfPolic
authored
fix(ui): propagate data table scroll (#14849)
1 parent 3a0692b commit 4efa4a6

File tree

2 files changed

+77
-46
lines changed

2 files changed

+77
-46
lines changed

‎.changeset/chatty-pandas-wait.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@medusajs/ui": patch
3+
---
4+
5+
fix(ui): propagate data table scroll

‎packages/design-system/ui/src/blocks/data-table/components/data-table-table.tsx‎

Lines changed: 72 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ const DataTableTable = (props: DataTableTableProps) => {
6565
if (instance.columnOrder && instance.columnOrder.length > 0) {
6666
return instance.columnOrder
6767
}
68-
return columns.map(col => col.id)
68+
return columns.map((col) => col.id)
6969
}, [columns, instance.columnOrder])
7070

7171
// Setup drag-and-drop sensors
@@ -98,9 +98,10 @@ const DataTableTable = (props: DataTableTableProps) => {
9898
}
9999

100100
// Use the current column order from the instance
101-
const currentOrder = instance.columnOrder && instance.columnOrder.length > 0
102-
? instance.columnOrder
103-
: columns.map(col => col.id)
101+
const currentOrder =
102+
instance.columnOrder && instance.columnOrder.length > 0
103+
? instance.columnOrder
104+
: columns.map((col) => col.id)
104105

105106
const oldIndex = currentOrder.indexOf(activeId)
106107
const newIndex = currentOrder.indexOf(overId)
@@ -169,8 +170,8 @@ const DataTableTable = (props: DataTableTableProps) => {
169170

170171
return (
171172
<div className="flex w-full flex-1 flex-col overflow-hidden">
172-
{instance.emptyState === DataTableEmptyState.POPULATED && (
173-
instance.enableColumnOrder ? (
173+
{instance.emptyState === DataTableEmptyState.POPULATED &&
174+
(instance.enableColumnOrder ? (
174175
<DndContext
175176
sensors={sensors}
176177
collisionDetection={closestCenter}
@@ -179,7 +180,7 @@ const DataTableTable = (props: DataTableTableProps) => {
179180
<div
180181
ref={scrollableRef}
181182
onScroll={handleHorizontalScroll}
182-
className="min-h-0 w-full flex-1 overflow-auto overscroll-none border-y"
183+
className="min-h-0 w-full flex-1 overflow-auto overscroll-auto border-y"
183184
>
184185
<Table className="relative isolate w-full">
185186
<Table.Header
@@ -203,22 +204,30 @@ const DataTableTable = (props: DataTableTableProps) => {
203204
{headerGroup.headers.map((header, idx) => {
204205
const canSort = header.column.getCanSort()
205206
const sortDirection = header.column.getIsSorted()
206-
const sortHandler = header.column.getToggleSortingHandler()
207+
const sortHandler =
208+
header.column.getToggleSortingHandler()
207209

208210
const isActionHeader = header.id === "action"
209211
const isSelectHeader = header.id === "select"
210-
const isSpecialHeader = isActionHeader || isSelectHeader
212+
const isSpecialHeader =
213+
isActionHeader || isSelectHeader
211214
const isDraggable = !isSpecialHeader
212215

213216
const Wrapper = canSort ? "button" : "div"
214-
const isFirstColumn = hasSelect ? idx === 1 : idx === 0
217+
const isFirstColumn = hasSelect
218+
? idx === 1
219+
: idx === 0
215220

216221
// Get header alignment from column metadata
217-
const headerAlign = (header.column.columnDef.meta as any)?.___alignMetaData?.headerAlign || 'left'
218-
const isRightAligned = headerAlign === 'right'
219-
const isCenterAligned = headerAlign === 'center'
222+
const headerAlign =
223+
(header.column.columnDef.meta as any)
224+
?.___alignMetaData?.headerAlign || "left"
225+
const isRightAligned = headerAlign === "right"
226+
const isCenterAligned = headerAlign === "center"
220227

221-
const HeaderCellComponent = isDraggable ? DataTableSortableHeaderCell : DataTableNonSortableHeaderCell
228+
const HeaderCellComponent = isDraggable
229+
? DataTableSortableHeaderCell
230+
: DataTableNonSortableHeaderCell
222231

223232
return (
224233
<HeaderCellComponent
@@ -237,44 +246,54 @@ const DataTableTable = (props: DataTableTableProps) => {
237246
"bg-ui-bg-subtle sticky":
238247
isFirstColumn || isSelectHeader,
239248
"left-0":
240-
isSelectHeader || (isFirstColumn && !hasSelect),
249+
isSelectHeader ||
250+
(isFirstColumn && !hasSelect),
241251
"left-[calc(20px+24px+24px)]":
242252
isFirstColumn && hasSelect,
243253
})}
244254
style={
245255
!isSpecialHeader
246256
? {
247-
width: header.column.columnDef.size,
248-
maxWidth: header.column.columnDef.maxSize,
249-
minWidth: header.column.columnDef.minSize,
250-
}
257+
width: header.column.columnDef.size,
258+
maxWidth: header.column.columnDef.maxSize,
259+
minWidth: header.column.columnDef.minSize,
260+
}
251261
: undefined
252262
}
253263
>
254264
<Wrapper
255265
type={canSort ? "button" : undefined}
256266
onClick={canSort ? sortHandler : undefined}
257-
onMouseDown={canSort ? (e) => e.stopPropagation() : undefined}
267+
onMouseDown={
268+
canSort
269+
? (e) => e.stopPropagation()
270+
: undefined
271+
}
258272
className={clx(
259273
"group flex cursor-default items-center gap-2",
260274
{
261275
"cursor-pointer": canSort,
262276
"w-full": isRightAligned || isCenterAligned,
263-
"w-fit": !isRightAligned && !isCenterAligned,
277+
"w-fit":
278+
!isRightAligned && !isCenterAligned,
264279
"justify-end": isRightAligned,
265280
"justify-center": isCenterAligned,
266281
}
267282
)}
268283
>
269284
{canSort && isRightAligned && (
270-
<DataTableSortingIcon direction={sortDirection} />
285+
<DataTableSortingIcon
286+
direction={sortDirection}
287+
/>
271288
)}
272289
{flexRender(
273290
header.column.columnDef.header,
274291
header.getContext()
275292
)}
276293
{canSort && !isRightAligned && (
277-
<DataTableSortingIcon direction={sortDirection} />
294+
<DataTableSortingIcon
295+
direction={sortDirection}
296+
/>
278297
)}
279298
</Wrapper>
280299
</HeaderCellComponent>
@@ -301,7 +320,9 @@ const DataTableTable = (props: DataTableTableProps) => {
301320
const isActionCell = cell.column.id === "action"
302321
const isSpecialCell = isSelectCell || isActionCell
303322

304-
const isFirstColumn = hasSelect ? idx === 1 : idx === 0
323+
const isFirstColumn = hasSelect
324+
? idx === 1
325+
: idx === 0
305326

306327
return (
307328
<Table.Cell
@@ -320,18 +341,19 @@ const DataTableTable = (props: DataTableTableProps) => {
320341
"after:bg-ui-border-base":
321342
showStickyBorder && isFirstColumn,
322343
"left-0":
323-
isSelectCell || (isFirstColumn && !hasSelect),
344+
isSelectCell ||
345+
(isFirstColumn && !hasSelect),
324346
"left-[calc(20px+24px+24px)]":
325347
isFirstColumn && hasSelect,
326348
}
327349
)}
328350
style={
329351
!isSpecialCell
330352
? {
331-
width: cell.column.columnDef.size,
332-
maxWidth: cell.column.columnDef.maxSize,
333-
minWidth: cell.column.columnDef.minSize,
334-
}
353+
width: cell.column.columnDef.size,
354+
maxWidth: cell.column.columnDef.maxSize,
355+
minWidth: cell.column.columnDef.minSize,
356+
}
335357
: undefined
336358
}
337359
>
@@ -353,7 +375,7 @@ const DataTableTable = (props: DataTableTableProps) => {
353375
<div
354376
ref={scrollableRef}
355377
onScroll={handleHorizontalScroll}
356-
className="min-h-0 w-full flex-1 overflow-auto overscroll-none border-y"
378+
className="min-h-0 w-full flex-1 overflow-auto overscroll-auto border-y"
357379
>
358380
<Table className="relative isolate w-full">
359381
<Table.Header
@@ -373,7 +395,8 @@ const DataTableTable = (props: DataTableTableProps) => {
373395
{headerGroup.headers.map((header, idx) => {
374396
const canSort = header.column.getCanSort()
375397
const sortDirection = header.column.getIsSorted()
376-
const sortHandler = header.column.getToggleSortingHandler()
398+
const sortHandler =
399+
header.column.getToggleSortingHandler()
377400

378401
const isActionHeader = header.id === "action"
379402
const isSelectHeader = header.id === "select"
@@ -383,9 +406,11 @@ const DataTableTable = (props: DataTableTableProps) => {
383406
const isFirstColumn = hasSelect ? idx === 1 : idx === 0
384407

385408
// Get header alignment from column metadata
386-
const headerAlign = (header.column.columnDef.meta as any)?.___alignMetaData?.headerAlign || 'left'
387-
const isRightAligned = headerAlign === 'right'
388-
const isCenterAligned = headerAlign === 'center'
409+
const headerAlign =
410+
(header.column.columnDef.meta as any)?.___alignMetaData
411+
?.headerAlign || "left"
412+
const isRightAligned = headerAlign === "right"
413+
const isCenterAligned = headerAlign === "center"
389414

390415
return (
391416
<Table.HeaderCell
@@ -409,17 +434,19 @@ const DataTableTable = (props: DataTableTableProps) => {
409434
style={
410435
!isSpecialHeader
411436
? {
412-
width: header.column.columnDef.size,
413-
maxWidth: header.column.columnDef.maxSize,
414-
minWidth: header.column.columnDef.minSize,
415-
}
437+
width: header.column.columnDef.size,
438+
maxWidth: header.column.columnDef.maxSize,
439+
minWidth: header.column.columnDef.minSize,
440+
}
416441
: undefined
417442
}
418443
>
419444
<Wrapper
420445
type={canSort ? "button" : undefined}
421446
onClick={canSort ? sortHandler : undefined}
422-
onMouseDown={canSort ? (e) => e.stopPropagation() : undefined}
447+
onMouseDown={
448+
canSort ? (e) => e.stopPropagation() : undefined
449+
}
423450
className={clx(
424451
"group flex cursor-default items-center gap-2",
425452
{
@@ -492,10 +519,10 @@ const DataTableTable = (props: DataTableTableProps) => {
492519
style={
493520
!isSpecialCell
494521
? {
495-
width: cell.column.columnDef.size,
496-
maxWidth: cell.column.columnDef.maxSize,
497-
minWidth: cell.column.columnDef.minSize,
498-
}
522+
width: cell.column.columnDef.size,
523+
maxWidth: cell.column.columnDef.maxSize,
524+
minWidth: cell.column.columnDef.minSize,
525+
}
499526
: undefined
500527
}
501528
>
@@ -512,8 +539,7 @@ const DataTableTable = (props: DataTableTableProps) => {
512539
</Table.Body>
513540
</Table>
514541
</div>
515-
)
516-
)}
542+
))}
517543
<DataTableEmptyStateDisplay
518544
state={instance.emptyState}
519545
props={props.emptyState}
@@ -572,7 +598,7 @@ const DataTableTableSkeleton = ({
572598
}: DataTableTableSkeletonProps) => {
573599
return (
574600
<div className="flex w-full flex-1 flex-col overflow-hidden">
575-
<div className="min-h-0 w-full flex-1 overscroll-none border-y">
601+
<div className="min-h-0 w-full flex-1 overscroll-auto border-y">
576602
<div className="flex flex-col divide-y">
577603
<Skeleton className="h-12 w-full" />
578604
{Array.from({ length: pageSize }, (_, i) => i).map((row) => (

0 commit comments

Comments
 (0)
⚡