wlw/ai-agent
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement sortable table with drag-and-drop functionality in DashboardCrudPage

Browse Source
This commit is contained in:
mlogclub
2026-05-30 20:46:12 +08:00
parent c31fdd7e00
commit 7e6fcc45ac
1 changed files with 52 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/components/dashboard/crud/dashboard-crud-page.tsx
+52 -42
View File
@@ -509,6 +509,57 @@ export function DashboardCrudPage<TItem, TPayload>({
) )
} }
const tableElement = (
<Table>
<TableHeader className="bg-muted/40">
<TableRow>
{sortable ? <TableHead className="w-10" /> : null}
{columns.map((column) => (
<TableHead key={column.key} className={column.className}>
{column.label}
</TableHead>
))}
<TableHead className="w-[92px] text-right">
{labels.actions}
</TableHead>
</TableRow>
</TableHeader>
{sortable ? (
<SortableContext
items={result.results.map((item) => String(getItemId(item)))}
strategy={verticalListSortingStrategy}
>
<TableBody>
{result.results.map((item) =>
renderTableRow(item, {
sortable: true,
sortDisabled: sort?.disabled,
})
)}
{renderStateRow()}
</TableBody>
</SortableContext>
) : (
<TableBody>
{result.results.map((item) => renderTableRow(item))}
{renderStateRow()}
</TableBody>
)}
</Table>
)
const table = sortable ? (
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragEnd={(event) => void handleSortEnd(event)}
>
{tableElement}
</DndContext>
) : (
tableElement
)
const content = ( const content = (
<> <>
{showToolbar ? ( {showToolbar ? (
@@ -576,48 +627,7 @@ export function DashboardCrudPage<TItem, TPayload>({
/> />
} }
> >
<Table> {table}
<TableHeader className="bg-muted/40">
<TableRow>
{sortable ? <TableHead className="w-10" /> : null}
{columns.map((column) => (
<TableHead key={column.key} className={column.className}>
{column.label}
</TableHead>
))}
<TableHead className="w-[92px] text-right">
{labels.actions}
</TableHead>
</TableRow>
</TableHeader>
{sortable ? (
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragEnd={(event) => void handleSortEnd(event)}
>
<SortableContext
items={result.results.map((item) => String(getItemId(item)))}
strategy={verticalListSortingStrategy}
>
<TableBody>
{result.results.map((item) =>
renderTableRow(item, {
sortable: true,
sortDisabled: sort?.disabled,
})
)}
{renderStateRow()}
</TableBody>
</SortableContext>
</DndContext>
) : (
<TableBody>
{result.results.map((item) => renderTableRow(item))}
{renderStateRow()}
</TableBody>
)}
</Table>
</DashboardTableShell> </DashboardTableShell>
</> </>
) )