refactor: add tooltip and time display on table

This commit is contained in:
moonrailgun 2024-05-14 00:06:40 +08:00
parent 9780affebc
commit 9d3c0344ee
2 changed files with 13 additions and 2 deletions

View File

@ -136,7 +136,16 @@ export const ServerList: React.FC<ServerListProps> = React.memo((props) => {
columnHelper.accessor('updatedAt', { columnHelper.accessor('updatedAt', {
header: t('updatedAt'), header: t('updatedAt'),
size: 130, size: 130,
cell: (props) => dayjs(props.getValue()).fromNow(), cell: (props) => (
<Tooltip>
<TooltipTrigger className="cursor-default">
<span>{dayjs(props.getValue()).fromNow()}</span>
</TooltipTrigger>
<TooltipContent>
{dayjs(props.getValue()).format('YYYY-MM-DD HH:mm:ss')}
</TooltipContent>
</Tooltip>
),
}), }),
]; ];
}, [t]); }, [t]);

View File

@ -19,6 +19,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { DataTable, createColumnHelper } from '@/components/DataTable'; import { DataTable, createColumnHelper } from '@/components/DataTable';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { SurveyDownloadBtn } from '@/components/survey/SurveyDownloadBtn'; import { SurveyDownloadBtn } from '@/components/survey/SurveyDownloadBtn';
import dayjs from 'dayjs';
type SurveyResultItem = type SurveyResultItem =
AppRouterOutput['survey']['resultList']['items'][number]; AppRouterOutput['survey']['resultList']['items'][number];
@ -77,7 +78,8 @@ function PageComponent() {
) ?? []), ) ?? []),
columnHelper.accessor('createdAt', { columnHelper.accessor('createdAt', {
header: t('Created At'), header: t('Created At'),
size: 150, size: 130,
cell: (props) => dayjs(props.getValue()).format('YYYY-MM-DD HH:mm:ss'),
}), }),
]; ];
}, [t, info]); }, [t, info]);