48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import { DataTable, Text } from '@moex-vibe/design-system'
|
||
import { Box } from '@mui/material'
|
||
import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
|
||
import type { DividendItem } from '@/shared/api'
|
||
|
||
interface DividendsTableProps {
|
||
dividends: DividendItem[]
|
||
}
|
||
|
||
const columnHelper = createColumnHelper<DividendItem>()
|
||
|
||
const columns = [
|
||
columnHelper.accessor('registryCloseDate', {
|
||
header: 'Дата закрытия реестра',
|
||
cell: (info) => info.getValue(),
|
||
}),
|
||
columnHelper.accessor('value', {
|
||
header: 'Сумма',
|
||
meta: { align: 'right' },
|
||
cell: (info) => `${info.getValue().toFixed(2)} ${info.row.original.currency}`,
|
||
}),
|
||
]
|
||
|
||
export function DividendsTable({ dividends }: DividendsTableProps) {
|
||
const table = useReactTable({
|
||
data: dividends,
|
||
columns,
|
||
getCoreRowModel: getCoreRowModel(),
|
||
})
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
background: 'var(--color-surface)',
|
||
borderRadius: 'var(--border-radius)',
|
||
boxShadow: 'var(--shadow)',
|
||
padding: 3,
|
||
}}
|
||
>
|
||
<DataTable
|
||
table={table}
|
||
caption="Дивиденды"
|
||
empty={<Text tone="secondary">Нет дивидендов</Text>}
|
||
/>
|
||
</Box>
|
||
)
|
||
}
|