Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Grid table virtualization #93

Merged
merged 24 commits into from
Jun 3, 2021
Merged

feat: Grid table virtualization #93

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
faf2cbc
Proof of concept with react-virtuoso.
stephenh May 30, 2021
f689ee0
Don't need AutoSizer.
stephenh May 30, 2021
8e47430
Add 'virtual' to TableAs, rename to RenderAs.
stephenh May 30, 2021
38ac985
Add comments, throw in stickyHeader.
stephenh May 30, 2021
07dfa3c
Fix story not memoizing columns.
stephenh May 30, 2021
ce20d09
Add objectId.
stephenh May 30, 2021
59dc991
Make renders top-level.
stephenh May 30, 2021
5aa8f48
Working with auto sizing.
stephenh May 30, 2021
ab92068
Working with auto-sizing and no Item.
stephenh May 31, 2021
1e9792e
Remove react-window and auto-sizer.
stephenh May 31, 2021
5d1f589
Undo the nodeFn approach.
stephenh May 31, 2021
d6053ef
Remove now unused refs.
stephenh May 31, 2021
c30298e
Add comments.
stephenh May 31, 2021
adc0fc7
Update sticky story.
stephenh May 31, 2021
4127afc
Use our react-virtuoso fork until patch is upstream.
stephenh May 31, 2021
8a02e55
Remove console.log.
stephenh May 31, 2021
208fe8b
Update snapshots.
stephenh May 31, 2021
e2211d7
Bump back to react-virtuoso which was itemSize merged.
stephenh Jun 1, 2021
e23d262
Remove stale comment.
stephenh Jun 1, 2021
a119c0a
Pin the firstRowMessage too b/c it's easy.
stephenh Jun 1, 2021
959cdfd
Remove link to resolved/patched issue.
stephenh Jun 1, 2021
86f666e
Dedup copy/pasted gridTemplateColumns calc.
stephenh Jun 1, 2021
dffbb14
Use Css.gtc and inline the vars.
stephenh Jun 1, 2021
3ae470f
Fix up after rebases.
stephenh Jun 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,14 @@
"change-case": "^4.1.2",
"date-fns": "^2.21.3",
"framer-motion": "^4.1.11",
"memoize-one": "^5.2.1",
"react-aria": "^3.6.0",
"react-day-picker": "^7.4.10",
"react-popper": "^2.2.5",
"react-stately": "^3.5.0",
"react-virtuoso": "^1.9.0",
"tributejs": "^5.1.3",
"trix": "^1.3.1",
"react-popper": "^2.2.5"
"trix": "^1.3.1"
},
"peerDependencies": {
"@emotion/react": ">=11",
Expand Down
44 changes: 28 additions & 16 deletions src/components/GridTable.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,32 +85,44 @@ export const Hovering = newStory(
);

export function Filtering() {
const nameColumn: GridColumn<Row> = { header: "Name", data: ({ name }) => name };
const valueColumn: GridColumn<Row> = { header: "Value", data: ({ value }) => value };
const actionColumn: GridColumn<Row> = { header: "Action", data: () => <div>Actions</div>, sort: false };
const rows: GridDataRow<Row>[] = useMemo(
() => [
{ kind: "header", id: "header" },
{ kind: "data", id: "1", name: "c", value: 1 },
{ kind: "data", id: "2", name: "b", value: 2 },
{ kind: "data", id: "3", name: "a", value: 3 },
...zeroTo(1_000).map((i) => ({ kind: "data" as const, id: String(i), name: `ccc ${i}`, value: i })),
],
[],
);
const columns: GridColumn<Row>[] = useMemo(
() => [
{ header: "Name", data: ({ name }) => name },
{ header: "Value", data: ({ value }) => value },
{ header: "Action", data: () => <div>Actions</div>, sort: false },
],
[],
);
const [filter, setFilter] = useState<string | undefined>();
return (
<div>
<input type="text" value={filter || ""} onChange={(e) => setFilter(e.target.value)} css={Css.ba.bGray900.$} />
<GridTable
columns={[nameColumn, valueColumn, actionColumn]}
sorting={"client-side"}
filter={filter}
rows={rows}
/>
<div css={Css.df.flexColumn.add({ height: heightWithoutStorybookPadding }).$}>
<div>
<input type="text" value={filter || ""} onChange={(e) => setFilter(e.target.value)} css={Css.ba.bGray900.$} />
</div>
<div css={Css.fg1.$}>
<GridTable
as="virtual"
columns={columns}
sorting={"client-side"}
filter={filter}
stickyHeader={true}
rows={rows}
/>
</div>
</div>
);
}

// .sb-main-padded adds 1rem on top/bottom
const heightWithoutStorybookPadding = "calc(100vh - 2rem)";

export function NoRowsFallback() {
const nameColumn: GridColumn<Row> = { header: "Name", data: ({ name }) => name };
const valueColumn: GridColumn<Row> = { header: "Value", data: ({ value }) => value };
Expand Down Expand Up @@ -214,14 +226,14 @@ export function StickyHeader() {
sort: false,
};
return (
<div>
<div style={{ height: heightWithoutStorybookPadding }}>
some other top of page content
<GridTable
columns={[nameColumn, valueColumn, actionColumn]}
stickyHeader={true}
rows={[
{ kind: "header", id: "header" },
...zeroTo(20).map((i) => ({ kind: "data" as const, id: "1", name: "c", value: 1 })),
...zeroTo(200).map((i) => ({ kind: "data" as const, id: `${i}`, name: `row ${i}`, value: i })),
]}
/>
</div>
Expand Down
Loading