@vendure-io/ui 2.0.0-beta.1 → 2.0.0-beta.2

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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/molecules/data-table/data-table.tsx +87 -85
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vendure-io/ui",
3
- "version": "2.0.0-beta.1",
3
+ "version": "2.0.0-beta.2",
4
4
  "description": "React component library for Vendure, built on shadcn/ui and Tailwind v4",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "homepage": "https://github.com/vendurehq/design/tree/main/packages/ui",
package/src/components/molecules/data-table/data-table.tsx CHANGED
@@ -367,95 +367,97 @@ function DataTable<TData>({
367
367
  <DataTableBulkActions table={table} cache={selectionCache} render={bulkActions} />
368
368
  )}
369
369
 
370
- <Table>
371
- <TableHeader>
372
- {table.getHeaderGroups().map((headerGroup) => (
373
- <TableRow key={headerGroup.id} className="group/header-row">
374
- {headerGroup.headers.map((headerCell) => {
375
- const content = headerCell.isPlaceholder
376
- ? null
377
- : flexRender(headerCell.column.columnDef.header, headerCell.getContext());
378
- return (
379
- <TableHead
380
- key={headerCell.id}
381
- aria-sort={ariaSort(sorting != null, headerCell.column)}
382
- className={columnClass(headerCell.column.id)}
383
- >
384
- {sorting != null && !headerCell.isPlaceholder ? (
385
- <DataTableColumnHeader
386
- column={headerCell.column}
387
- sortLabel={l.sortLabel(headerLabelText(headerCell.column))}
388
- >
389
- {content}
390
- </DataTableColumnHeader>
391
- ) : (
392
- content
393
- )}
394
- </TableHead>
395
- );
396
- })}
397
- </TableRow>
398
- ))}
399
- </TableHeader>
400
- <TableBody>
401
- {isLoading && rows.length === 0 ? (
402
- Array.from({ length: skeletonRowCount }).map((_, rowIndex) => (
403
- <TableRow key={`skeleton-${rowIndex}`}>
404
- {Array.from({ length: Math.max(columnCount, 1) }).map((__, cellIndex) => (
405
- <TableCell key={`skeleton-cell-${cellIndex}`}>
406
- <Skeleton className="h-4 w-full" />
407
- </TableCell>
408
- ))}
370
+ <div className="bg-card overflow-hidden rounded-xl border">
371
+ <Table>
372
+ <TableHeader>
373
+ {table.getHeaderGroups().map((headerGroup) => (
374
+ <TableRow key={headerGroup.id} className="group/header-row">
375
+ {headerGroup.headers.map((headerCell) => {
376
+ const content = headerCell.isPlaceholder
377
+ ? null
378
+ : flexRender(headerCell.column.columnDef.header, headerCell.getContext());
379
+ return (
380
+ <TableHead
381
+ key={headerCell.id}
382
+ aria-sort={ariaSort(sorting != null, headerCell.column)}
383
+ className={columnClass(headerCell.column.id)}
384
+ >
385
+ {sorting != null && !headerCell.isPlaceholder ? (
386
+ <DataTableColumnHeader
387
+ column={headerCell.column}
388
+ sortLabel={l.sortLabel(headerLabelText(headerCell.column))}
389
+ >
390
+ {content}
391
+ </DataTableColumnHeader>
392
+ ) : (
393
+ content
394
+ )}
395
+ </TableHead>
396
+ );
397
+ })}
409
398
  </TableRow>
410
- ))
411
- ) : bodyRows.length === 0 ? (
412
- <TableRow className="hover:bg-transparent">
413
- <TableCell
414
- colSpan={Math.max(columnCount, 1)}
415
- className="text-muted-foreground h-24 text-center"
416
- >
417
- {emptyState ?? l.empty}
418
- </TableCell>
419
- </TableRow>
420
- ) : (
421
- bodyRows.map((row) => {
422
- const rowNode = (
423
- <TableRow
424
- className="group/row"
425
- data-state={row.getIsSelected() ? 'selected' : undefined}
426
- >
427
- {row.getVisibleCells().map((cell) => (
428
- <TableCell key={cell.id} className={columnClass(cell.column.id)}>
429
- {flexRender(cell.column.columnDef.cell, cell.getContext())}
399
+ ))}
400
+ </TableHeader>
401
+ <TableBody>
402
+ {isLoading && rows.length === 0 ? (
403
+ Array.from({ length: skeletonRowCount }).map((_, rowIndex) => (
404
+ <TableRow key={`skeleton-${rowIndex}`}>
405
+ {Array.from({ length: Math.max(columnCount, 1) }).map((__, cellIndex) => (
406
+ <TableCell key={`skeleton-cell-${cellIndex}`}>
407
+ <Skeleton className="h-4 w-full" />
430
408
  </TableCell>
431
409
  ))}
432
410
  </TableRow>
433
- );
434
- // Right-click accelerator: the row itself is the context-menu
435
- // trigger, so the consumer supplies only the items and the core
436
- // owns the menu chrome.
437
- const defaultRow = contextActions ? (
438
- <ContextMenu>
439
- <ContextMenuTrigger render={rowNode} />
440
- <ContextMenuContent>
441
- {contextActions(row.original, { row, table })}
442
- </ContextMenuContent>
443
- </ContextMenu>
444
- ) : (
445
- rowNode
446
- );
447
- // Row-render seam: consumers can swap the default row for a
448
- // full-width utility row or a per-row wrapper the cell grid can't
449
- // express. Returning `defaultRow` keeps the built-in rendering.
450
- return (
451
- <React.Fragment key={row.id}>
452
- {renderRow ? renderRow(row, { table, columnCount, defaultRow }) : defaultRow}
453
- </React.Fragment>
454
- );
455
- })
456
- )}
457
- </TableBody>
458
- </Table>
411
+ ))
412
+ ) : bodyRows.length === 0 ? (
413
+ <TableRow className="hover:bg-transparent">
414
+ <TableCell
415
+ colSpan={Math.max(columnCount, 1)}
416
+ className="text-muted-foreground h-24 text-center"
417
+ >
418
+ {emptyState ?? l.empty}
419
+ </TableCell>
420
+ </TableRow>
421
+ ) : (
422
+ bodyRows.map((row) => {
423
+ const rowNode = (
424
+ <TableRow
425
+ className="group/row"
426
+ data-state={row.getIsSelected() ? 'selected' : undefined}
427
+ >
428
+ {row.getVisibleCells().map((cell) => (
429
+ <TableCell key={cell.id} className={columnClass(cell.column.id)}>
430
+ {flexRender(cell.column.columnDef.cell, cell.getContext())}
431
+ </TableCell>
432
+ ))}
433
+ </TableRow>
434
+ );
435
+ // Right-click accelerator: the row itself is the context-menu
436
+ // trigger, so the consumer supplies only the items and the core
437
+ // owns the menu chrome.
438
+ const defaultRow = contextActions ? (
439
+ <ContextMenu>
440
+ <ContextMenuTrigger render={rowNode} />
441
+ <ContextMenuContent>
442
+ {contextActions(row.original, { row, table })}
443
+ </ContextMenuContent>
444
+ </ContextMenu>
445
+ ) : (
446
+ rowNode
447
+ );
448
+ // Row-render seam: consumers can swap the default row for a
449
+ // full-width utility row or a per-row wrapper the cell grid can't
450
+ // express. Returning `defaultRow` keeps the built-in rendering.
451
+ return (
452
+ <React.Fragment key={row.id}>
453
+ {renderRow ? renderRow(row, { table, columnCount, defaultRow }) : defaultRow}
454
+ </React.Fragment>
455
+ );
456
+ })
457
+ )}
458
+ </TableBody>
459
+ </Table>
460
+ </div>
459
461
 
460
462
  {pagination && (
461
463
  <TablePagination