67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import { t as i18nT } from "i18next";
|
|
import { useLocaleFormatters } from "~/locale/format";
|
|
import TableSimple from "./TableSimple";
|
|
|
|
const items = [
|
|
{
|
|
firstName: "John",
|
|
lastName: "Doe",
|
|
email: "john.doe@company.com",
|
|
salary: 100,
|
|
birthday: new Date(1990, 1, 1),
|
|
},
|
|
{
|
|
firstName: "Luna",
|
|
lastName: "Davis",
|
|
email: "luna.davis@company.com",
|
|
salary: 100.5,
|
|
birthday: new Date(1990, 12, 31),
|
|
},
|
|
];
|
|
export default function PreviewTableSimple() {
|
|
const formatters = useLocaleFormatters();
|
|
return (
|
|
<div id="buttons">
|
|
<div className="not-prose border-border bg-background border border-dashed p-6">
|
|
<div className="w-full space-y-2">
|
|
<TableSimple
|
|
items={items}
|
|
headers={[
|
|
{
|
|
title: i18nT("components.tables.preview.fullName"),
|
|
name: "name",
|
|
value: (item) => `${item.firstName} ${item.lastName}`,
|
|
},
|
|
{
|
|
title: i18nT("components.tables.preview.email"),
|
|
name: "email",
|
|
value: (item) => item.email,
|
|
},
|
|
{
|
|
title: i18nT("components.tables.preview.salary"),
|
|
name: "salary",
|
|
className: "text-blue-500",
|
|
value: (item) => item.salary,
|
|
formattedValue: (item) => formatters.number(item.salary, { minimumFractionDigits: 2, maximumFractionDigits: 2 }),
|
|
},
|
|
{
|
|
title: i18nT("components.tables.preview.birthday"),
|
|
name: "birthday",
|
|
className: "text-muted-foreground",
|
|
value: (item) => item.birthday,
|
|
formattedValue: (item) => formatters.date(item.birthday),
|
|
},
|
|
]}
|
|
actions={[
|
|
{
|
|
title: i18nT("components.tables.preview.view"),
|
|
onClick: (_, item) => alert(i18nT("components.tables.preview.clicked", { name: item.firstName })),
|
|
},
|
|
]}
|
|
></TableSimple>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|