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 {format(value, 'E', { locale })} |
- })}
-
-
-
- {body.value.map(({ key, value: days }) => (
-
- {days.map(({ key, value }) => (
- {getDate(value)} |
- ))}
-
- ))}
-
-
+
+
+ {theadGroups.map(({ theads, getRowProps }) => {
+ const props = getRowProps()
+
+ return (
+
+ {theads.map(head => (
+ {head.render({ cellProps: head })} |
+ ))}
+
+ )
+ })}
+
+
+ {rows.map(({ cells, getRowProps }) => {
+ const props = getRowProps()
+
+ return (
+
+ {cells.map(cell => (
+ cell.colSpan !== 0
+ ? {cell.render({ cellProps: cell })} |
+ : null
+ )}
+
+ )
+ })}
+
+
)
}
```