Skip to content

Commit

Permalink
docs: add GroupedVirtuosoTable doc
Browse files Browse the repository at this point in the history
  • Loading branch information
malo committed Nov 21, 2022
1 parent 2659e6c commit b82acd7
Show file tree
Hide file tree
Showing 5 changed files with 121 additions and 107 deletions.
140 changes: 38 additions & 102 deletions examples/group-table.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,107 +1,43 @@
import * as React from 'react'
import { GroupedTableVirtuoso, GroupedTableVirtuosoHandle } from '../src/'
import React, { useMemo } from 'react'
import { GroupedTableVirtuoso } from '../src/'

export default function App() {
const ref = React.useRef<GroupedTableVirtuosoHandle>(null)
return (
<>
<GroupedTableVirtuoso
ref={ref}
components={{
EmptyPlaceholder: () => {
return (
<tbody>
<tr>
<td>Empty</td>
</tr>
</tbody>
)
},
}}
groupCounts={Array.from({ length: 100 }).fill(10) as number[]}
style={{ height: 700 }}
fixedHeaderContent={() => {
return (
<tr style={{ background: 'white' }}>
<th key={1} style={{ height: 150, border: '1px solid black', background: 'white' }}>
TH 1
</th>
<th key={2} style={{ height: 150, border: '1px solid black', background: 'white' }}>
TH meh
</th>
</tr>
)
}}
fixedFooterContent={() => {
return (
<tr style={{ background: 'white' }}>
<th key={1} style={{ height: 150, border: '1px solid black', background: 'white' }}>
Footer TH 1
</th>
<th key={2} style={{ height: 150, border: '1px solid black', background: 'white' }}>
Footer TH meh
</th>
</tr>
)
}}
itemContent={(index) => {
return (
<>
<td style={{ height: 21 }}>{index}Cell 1</td>
<td style={{ height: 21 }}>Cell 2</td>
</>
)
}}
groupContent={(index) => {
return (
<>
<td style={{ height: 21 }}>Group {index}</td>
<td style={{ height: 21 }}>Meh</td>
</>
)
}}
/>
<button
onClick={() =>
ref.current.scrollToIndex({
index: 900,
align: 'start',
})
}
>
scroll 900 start
</button>
<button
onClick={() =>
ref.current.scrollToIndex({
index: 900,
align: 'end',
})
}
>
scroll 900 end
</button>
const groupCounts = useMemo(() => {
return Array(1000).fill(10) as number[]
}, [])

<button
onClick={() =>
ref.current.scrollToIndex({
index: 900,
align: 'center',
})
}
>
scroll 900 center
</button>
<button
onClick={() =>
ref.current.scrollIntoView({
index: 50,
})
}
>
scroll 50 into view
</button>
<p>Buttons should align 900 correctly </p>
</>
return (
<GroupedTableVirtuoso
groupCounts={groupCounts}
style={{ height: 700 }}
fixedHeaderContent={() => {
return (
<tr style={{ background: 'white', textAlign: 'left' }}>
<th key={1} style={{ width: '140px' }}>
Item index
</th>
<th key={2} style={{ width: '140px' }}>
Greetings
</th>
</tr>
)
}}
itemContent={(index) => {
return (
<>
<td style={{ height: 21 }}>{index}</td>
<td style={{ height: 21 }}>Hello</td>
</>
)
}}
groupContent={(index) => {
return (
<>
<td style={{ height: 21, background: 'white' }}>Group {index}</td>
<td style={{ height: 21, background: 'white' }} />
</>
)
}}
/>
)
}
56 changes: 56 additions & 0 deletions site/docs/grouped-table.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
---
id: grouped-table
title: Grouped Table
sidebar_label: Grouped Table
slug: /grouped-table/
---

The example below shows a simple table grouping mode.

```jsx live
import { GroupedTableVirtuoso } from 'react-virtuoso'
import { useMemo, useRef } from 'react'

export default function App() {
const ref = useRef()

const groupCounts = useMemo(() => {
return Array(1000).fill(10)
}, [])

return (
<GroupedTableVirtuoso
groupCounts={groupCounts}
style={{ height: 400 }}
fixedHeaderContent={() => {
return (
<tr style={{ background: 'white', textAlign: 'left' }}>
<th key={1} style={{ width: '140px' }}>
Item index
</th>
<th key={2} style={{ width: '140px' }}>
Greetings
</th>
</tr>
)
}}
itemContent={(index) => {
return (
<>
<td style={{ height: 21 }}>{index}</td>
<td style={{ height: 21 }}>Hello</td>
</>
)
}}
groupContent={(index) => {
return (
<>
<td style={{ height: 21, background: 'white' }}>Group {index}</td>
<td style={{ height: 21, background: 'white' }} />
</>
)
}}
/>
)
}
```
13 changes: 10 additions & 3 deletions site/docs/table-virtuoso-api-reference.md
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
---
id: table-virtuoso-api-reference
title: Table Virtuoso API Reference
sidebar_label: Table Virtuoso
sidebar_label: Table Virtuoso
slug: /table-virtuoso-api-reference/
---

import Props from './api/interfaces/_components_.tablevirtuosoprops.md'
import GroupProps from './api/interfaces/_components_.groupedvirtuosoprops.md'
import VirtuosoProps from './api/interfaces/_components_.virtuosoprops.md'
import Methods from './api/interfaces/_components_.virtuosohandle.md'

All properties are optional - by default, the component will render empty.
All properties are optional - by default, the component will render empty.

If you are using TypeScript and want to use correctly typed component `ref`, you can use the `VirtuosoHandle`.

Expand All @@ -21,12 +22,18 @@ const ref = useRef<VirtuosoHandle>(null)
<TableVirtuoso ref={ref} /*...*/ />
```

## Table Virtuoso Properties
## TableVirtuoso Properties

<div className="generated-api">
<Props />
</div>

## GroupedTableVirtuoso Properties

<div className="generated-api">
<GroupProps />
</div>

## Methods

<div className="generated-api">
Expand Down
2 changes: 1 addition & 1 deletion site/sidebars.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ module.exports = {
'initial-index',
'range-change-callback',
],
'Grouped Mode': ['grouped-numbers', 'grouped-by-first-letter', 'grouped-with-load-on-demand', 'scroll-to-group'],
'Grouped Mode': ['grouped-numbers', 'grouped-by-first-letter', 'grouped-with-load-on-demand', 'scroll-to-group', 'grouped-table'],
Table: ['hello-table', 'table-fixed-headers', 'mui-table-virtual-scroll', 'table-fixed-columns', 'react-table-integration'],
Grid: ['grid-responsive-columns'],
Scenarios: [
Expand Down
17 changes: 16 additions & 1 deletion site/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2308,6 +2308,11 @@
resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-5.0.3.tgz#e7b5aebbac150f8b5fdd4a46e7f0bd8e65e19109"
integrity sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw==

"@types/prop-types@*":
version "15.7.5"
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==

"@types/prop-types@^15.7.4":
version "15.7.4"
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
Expand Down Expand Up @@ -2340,10 +2345,20 @@
"@types/react" "*"

"@types/react@*":
version "0.0.0"
version "18.0.5"
dependencies:
"@types/prop-types" "*"
"@types/scheduler" "*"
csstype "^3.0.2"

"@types/react@link:../node_modules/@types/react":
version "0.0.0"
uid ""

"@types/scheduler@*":
version "0.16.2"
resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==

"@types/source-list-map@*":
version "0.1.2"
Expand Down

0 comments on commit b82acd7

Please sign in to comment.