schiwagoa/tianji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: change datatable expend icon and add transition

Browse Source
This commit is contained in:
moonrailgun 2024-05-16 20:24:03 +08:00
parent c6433f310b
commit 74bd9ef3d9
1 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/client/components/DataTable.tsx
View File

@ -19,7 +19,7 @@ import {
import { Empty } from 'antd'; import { Empty } from 'antd';
import React from 'react'; import React from 'react';
import { Button } from './ui/button'; import { Button } from './ui/button';
import { LuArrowRight } from 'react-icons/lu'; import { LuChevronRight } from 'react-icons/lu';
import { cn } from '@/utils/style'; import { cn } from '@/utils/style';
export type { ColumnDef }; export type { ColumnDef };
@ -50,6 +50,8 @@ export function DataTable<TData>({
getRowCanExpand: () => canExpand, getRowCanExpand: () => canExpand,
}); });
const columnLen = canExpand ? columns.length + 1 : columns.length;
return ( return (
<div className="rounded-md border"> <div className="rounded-md border">
<Table> <Table>
@ -62,10 +64,10 @@ export function DataTable<TData>({
variant="ghost" variant="ghost"
size="icon" size="icon"
className={cn( className={cn(
'mr-1 h-5 w-5', 'mr-1 h-5 w-5 transition-transform',
table.getIsAllRowsExpanded() && 'rotate-90' table.getIsAllRowsExpanded() && 'rotate-90'
)} )}
Icon={LuArrowRight} Icon={LuChevronRight}
onClick={table.getToggleAllRowsExpandedHandler()} onClick={table.getToggleAllRowsExpandedHandler()}
/> />
</TableHead> </TableHead>
@ -100,10 +102,10 @@ export function DataTable<TData>({
variant="ghost" variant="ghost"
size="icon" size="icon"
className={cn( className={cn(
'mr-1 h-5 w-5', 'mr-1 h-5 w-5 transition-transform',
row.getIsExpanded() && 'rotate-90' row.getIsExpanded() && 'rotate-90'
)} )}
Icon={LuArrowRight} Icon={LuChevronRight}
onClick={row.getToggleExpandedHandler()} onClick={row.getToggleExpandedHandler()}
/> />
</TableCell> </TableCell>
@ -120,25 +122,23 @@ export function DataTable<TData>({
</TableRow> </TableRow>
); );
if (row.getIsExpanded() && ExpandComponent) { return (
return ( <>
<> {renderedRow}
{renderedRow}
{row.getIsExpanded() && ExpandComponent && (
<TableRow key={row.id + 'expand'}> <TableRow key={row.id + 'expand'}>
<TableCell colSpan={table.getAllLeafColumns().length + 1}> <TableCell colSpan={columnLen}>
<ExpandComponent row={row.original} /> <ExpandComponent row={row.original} />
</TableCell> </TableCell>
</TableRow> </TableRow>
</> )}
); </>
} else { );
return renderedRow;
}
}) })
) : ( ) : (
<TableRow> <TableRow>
<TableCell colSpan={columns.length} className="h-24 text-center"> <TableCell colSpan={columnLen} className="h-24 text-center">
<Empty /> <Empty />
</TableCell> </TableCell>
</TableRow> </TableRow>