diff --git a/website/docs/table/example.md b/website/docs/table/example.md index 66e3585a..7a89fa48 100644 --- a/website/docs/table/example.md +++ b/website/docs/table/example.md @@ -6,37 +6,52 @@ title: Example [View Source on GitHub](https://github.com/h6s-dev/h6s/blob/main/examples/react/src/pages/table/index.tsx) ```tsx -import { useCalendar } from '@h6s/calendar' +import { useTable } from '@h6s/table' -export default function Calendar() { - const { headers, body, view } = useCalendar() +export default function Table() { + const [{ theadGroups, rows }, controls] = useTable({ + model: myTableModel, + source: products, + }) return ( - - - - {headers.weekDays.map(({ key, value }) => { - return - })} - - - - {body.value.map(({ key, value: days }) => ( - - {days.map(({ key, value }) => ( - - ))} - - ))} - -
{format(value, 'E', { locale })}
{getDate(value)}
+ + + {theadGroups.map(({ theads, getRowProps }) => { + const props = getRowProps() + + return ( + + {theads.map(head => ( + + ))} + + ) + })} + + + {rows.map(({ cells, getRowProps }) => { + const props = getRowProps() + + return ( + + {cells.map(cell => ( + cell.colSpan !== 0 + ? + : null + )} + + ) + })} + +
{head.render({ cellProps: head })}
{cell.render({ cellProps: cell })}
) } ```