Files
spoolman2/client/src/pages/filaments/list.tsx
2023-05-14 20:06:44 +02:00

109 lines
3.0 KiB
TypeScript

import React from "react";
import { IResourceComponentsProps, BaseRecord } from "@refinedev/core";
import {
useTable,
List,
EditButton,
ShowButton,
DateField,
NumberField,
} from "@refinedev/antd";
import { Table, Space } from "antd";
export const FilamentList: React.FC<IResourceComponentsProps> = () => {
const { tableProps } = useTable({
syncWithLocation: true,
});
return (
<List>
<Table {...tableProps} rowKey="id">
<Table.Column dataIndex="id" title="Id" />
<Table.Column dataIndex={["vendor", "name"]} title="Vendor" />
<Table.Column dataIndex="name" title="Name" />
<Table.Column dataIndex="material" title="Material" />
<Table.Column dataIndex="price" title="Price" />
<Table.Column
dataIndex="density"
title="Density"
render={(value) => (
<NumberField
value={value}
options={{
unitDisplay: "short",
unit: "gram",
style: "unit",
maximumFractionDigits: 2,
}}
/>
)}
/>
<Table.Column
dataIndex="diameter"
title="Diameter"
render={(value) => (
<NumberField
value={value}
options={{
unitDisplay: "short",
unit: "millimeter",
style: "unit",
maximumFractionDigits: 2,
}}
/>
)}
/>
<Table.Column
dataIndex="weight"
title="Weight"
render={(value) => (
<NumberField
value={value}
options={{
unitDisplay: "short",
unit: "gram",
style: "unit",
maximumFractionDigits: 1,
}}
/>
)}
/>
<Table.Column
dataIndex="spool_weight"
title="Spool Weight"
render={(value) => (
<NumberField
value={value}
options={{
unitDisplay: "short",
unit: "gram",
style: "unit",
maximumFractionDigits: 1,
}}
/>
)}
/>
<Table.Column dataIndex="article_number" title="Article Number" />
<Table.Column
dataIndex={["registered"]}
title="Registered"
render={(value) => (
<DateField value={value} format="YYYY-MM-DD HH:mm:ss" />
)}
/>
<Table.Column dataIndex={["comment"]} title="Comment" />
<Table.Column
title="Actions"
dataIndex="actions"
render={(_, record: BaseRecord) => (
<Space>
<EditButton hideText size="small" recordItemId={record.id} />
<ShowButton hideText size="small" recordItemId={record.id} />
</Space>
)}
/>
</Table>
</List>
);
};