From a7a0e281b6d6cf1da33faf9e8d74857545054e6c Mon Sep 17 00:00:00 2001 From: Nicole Thoen Date: Tue, 14 Nov 2023 16:38:30 -0500 Subject: [PATCH 1/5] fix: add pf-v5-c-table__body class (#24) * fix: add pf-v5-c-table__body class * after rebase --- .../content/examples/WindowScroller.tsx | 14 +++++++------- .../extensions/virtual-scroll-table/react.js | 4 +--- .../virtual-scroll-window-scroller/react.js | 4 +--- .../src/components/Virtualized/VirtualGrid.ts | 2 +- 4 files changed, 10 insertions(+), 14 deletions(-) diff --git a/packages/module/patternfly-docs/content/examples/WindowScroller.tsx b/packages/module/patternfly-docs/content/examples/WindowScroller.tsx index 6383e39..70356fe 100644 --- a/packages/module/patternfly-docs/content/examples/WindowScroller.tsx +++ b/packages/module/patternfly-docs/content/examples/WindowScroller.tsx @@ -34,21 +34,21 @@ export class WindowScrollerExample extends React.Component { columns: [ { title: 'Repositories', - props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' } + props: { className: 'pf-v5-c-table__th pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' } }, { title: 'Branches', - props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' } + props: { className: 'pf-v5-c-table__th pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' } }, { title: 'Pull requests', - props: { className: 'pf-m-4-col-on-md pf-m-4-col-on-lg pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-md' } + props: { className: 'pf-v5-c-table__th pf-m-4-col-on-md pf-m-4-col-on-lg pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-md' } }, { title: 'Workspaces', - props: { className: 'pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-lg' } + props: { className: 'pf-v5-c-table__th pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-lg' } }, - { title: 'Last Commit', props: { className: 'pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-xl' } } + { title: 'Last Commit', props: { className: 'pf-v5-c-table__th pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-xl' } } ], rows }; @@ -86,7 +86,7 @@ export class WindowScrollerExample extends React.Component { return ( - + {text} @@ -140,7 +140,7 @@ export class WindowScrollerExample extends React.Component { {\n // this StringArray type is just needed because something in our documentation framework crashes when it encounters\n // a string[][] type\n type StringArray = string[];\n const rows: StringArray[] = [];\n for (let i = 0; i < 100; i++) {\n rows.push([`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]);\n }\n\n const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit'];\n\n const measurementCache = new CellMeasurerCache({\n fixedWidth: true,\n minHeight: 44,\n keyMapper: (rowIndex) => rowIndex\n });\n\n const rowRenderer = ({ index: rowIndex, _isScrolling, key, style, parent }) => (\n \n \n {columns.map((col, index) => (\n {rows[rowIndex][index]}\n ))}\n \n \n );\n\n return (\n
\n \n \n \n \n {columns.map((col, index) => (\n \n ))}\n \n \n
Simple Table
{col}
\n \n {({ width }) => (\n \n )}\n \n
\n );\n};\n","title":"Basic","lang":"js"}}> diff --git a/packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js b/packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js index 24607e3..6a88167 100644 --- a/packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js +++ b/packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js @@ -176,9 +176,7 @@ pageData.liveContext = { TableDeprecated, TableHeaderDeprecated }; -pageData.relativeImports = { - -}; +pageData.relativeImports = "import 'content/examples/./VirtualGrid.example.css';,import 'content/examples/./WindowScroller.example.css';" pageData.examples = { 'Window scroller': props => rowIndex\n });\n }\n\n this.state = {\n scrollToIndex: -1, // can be used to programmatically set current index\n scrollableElement: null,\n columns: [\n {\n title: 'Repositories',\n props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }\n },\n {\n title: 'Branches',\n props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }\n },\n {\n title: 'Pull requests',\n props: { className: 'pf-m-4-col-on-md pf-m-4-col-on-lg pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-md' }\n },\n {\n title: 'Workspaces',\n props: { className: 'pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-lg' }\n },\n { title: 'Last Commit', props: { className: 'pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-xl' } }\n ],\n rows\n };\n\n this._handleResize = debounce(this._handleResize.bind(this), 100);\n this._bindBodyRef = this._bindBodyRef.bind(this);\n }\n\n componentDidMount() {\n // re-render after resize\n window.addEventListener('resize', this._handleResize);\n\n this.setState({ scrollableElement: document.getElementById('content-scrollable-1') });\n }\n\n componentWillUnmount() {\n window.removeEventListener('resize', this._handleResize);\n }\n\n _handleResize() {\n this._cellMeasurementCache.clearAll();\n this._bodyRef.recomputeVirtualGridSize();\n }\n\n _bindBodyRef(ref) {\n this._bodyRef = ref;\n }\n\n render() {\n const { scrollToIndex, columns, rows, scrollableElement } = this.state;\n\n const rowRenderer = ({ index, _isScrolling, key, style, parent }) => {\n const { rows, columns } = this.state;\n const text = rows[index].cells[0];\n\n return (\n \n \n \n {text}\n \n \n {text}\n \n \n {text}\n \n \n {text}\n \n \n {text}\n \n \n \n );\n };\n\n return (\n \n
\n \n \n \n {scrollableElement && (\n \n {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (\n \n {({ width }) => (\n
\n \n
\n )}\n \n )}\n \n )}\n
\n \n );\n }\n}\n","title":"Window scroller","lang":"js"}}> diff --git a/packages/module/src/components/Virtualized/VirtualGrid.ts b/packages/module/src/components/Virtualized/VirtualGrid.ts index 0a0cc84..2c0bdbe 100644 --- a/packages/module/src/components/Virtualized/VirtualGrid.ts +++ b/packages/module/src/components/Virtualized/VirtualGrid.ts @@ -1006,7 +1006,7 @@ export class VirtualGrid extends React.Component 0) { const innerScrollContainerProps = { - className: 'ReactVirtualized__VirtualGrid__innerScrollContainer', + className: 'ReactVirtualized__VirtualGrid__innerScrollContainer pf-v5-c-table__tbody', key: 'ReactVirtualized__VirtualGrid__innerScrollContainer', role: containerRole, style: { From f77fad65281cf370313225665e528828d8e94a11 Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Wed, 22 Nov 2023 10:31:04 -0500 Subject: [PATCH 2/5] rename composable demos and remove deprecated window scroller demo rename composable window scroller demo --- .../UsingComposableTableComponents.tsx | 75 ----- .../UsingComposableTableComponentsDemo.tsx | 116 -------- .../content/examples/VirtualizedTable.md | 5 - .../content/examples/WindowScroller.md | 7 +- .../content/examples/WindowScroller.tsx | 262 +++++++----------- .../extensions/virtual-scroll-table/react.js | 6 - .../virtual-scroll-window-scroller/react.js | 10 +- .../module/patternfly-docs/generated/index.js | 8 +- 8 files changed, 111 insertions(+), 378 deletions(-) delete mode 100644 packages/module/patternfly-docs/content/examples/UsingComposableTableComponents.tsx delete mode 100644 packages/module/patternfly-docs/content/examples/UsingComposableTableComponentsDemo.tsx diff --git a/packages/module/patternfly-docs/content/examples/UsingComposableTableComponents.tsx b/packages/module/patternfly-docs/content/examples/UsingComposableTableComponents.tsx deleted file mode 100644 index 15933a9..0000000 --- a/packages/module/patternfly-docs/content/examples/UsingComposableTableComponents.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import React from 'react'; - -import { CellMeasurerCache, CellMeasurer } from 'react-virtualized'; -import { AutoSizer, VirtualTableBody } from '@patternfly/react-virtualized-extension'; -import { Table, Thead, Tr, Th, Td, Caption, TableGridBreakpoint } from '@patternfly/react-table'; - -export const ComposableTableVirtualized = () => { - const rows = []; - for (let i = 0; i < 100; i++) { - rows.push([`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]); - } - const [selected, setSelected] = React.useState(rows.map((_row) => false)); - const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit']; - - const onSelect = (event, isSelected, rowId) => { - setSelected(selected.map((sel, index) => (index === rowId ? isSelected : sel))); - }; - - const measurementCache = new CellMeasurerCache({ - fixedWidth: true, - minHeight: 44, - keyMapper: (rowIndex) => rowIndex - }); - - const rowRenderer = ({ index: rowIndex, _isScrolling, key, style, parent }) => ( - - - - {columns.map((col, index) => ( - {rows[rowIndex][index]} - ))} - - - ); - - return ( -
- - - - - - ))} - - -
Virtualized table with composable table components
- {columns.map((col, index) => ( - {col}
- - {({ width }) => ( - - )} - -
- ); -}; diff --git a/packages/module/patternfly-docs/content/examples/UsingComposableTableComponentsDemo.tsx b/packages/module/patternfly-docs/content/examples/UsingComposableTableComponentsDemo.tsx deleted file mode 100644 index ea411ea..0000000 --- a/packages/module/patternfly-docs/content/examples/UsingComposableTableComponentsDemo.tsx +++ /dev/null @@ -1,116 +0,0 @@ -import React from 'react'; -import { CellMeasurerCache, CellMeasurer } from 'react-virtualized'; -import { AutoSizer, VirtualTableBody, WindowScroller } from '@patternfly/react-virtualized-extension'; -import { Table, Thead, Tr, Th, Td, Caption, TableGridBreakpoint } from '@patternfly/react-table'; - -export const ComposableTableWindowScroller = () => { - const [scrollableElement, setScrollableElement] = React.useState(); - React.useEffect(() => { - const scrollableElement = document.getElementById('content-scrollable-2'); - setScrollableElement(scrollableElement); - }); - const rows = []; - for (let i = 0; i < 100000; i++) { - const cells = []; - const num = Math.floor(Math.random() * Math.floor(2)) + 1; - for (let j = 0; j < 5; j++) { - const cellValue = i.toString() + ' Arma virumque cano Troiae qui primus ab oris. '.repeat(num); - cells.push(cellValue); - } - rows.push(cells); - } - const [selected, setSelected] = React.useState(rows.map((_row) => false)); - const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit']; - const scrollToIndex = -1; // can be used to programmatically set current index - - const onSelect = (event, isSelected, rowId) => { - setSelected(selected.map((sel, index) => (index === rowId ? isSelected : sel))); - }; - - const measurementCache = new CellMeasurerCache({ - fixedWidth: true, - minHeight: 44, - keyMapper: (rowIndex) => rowIndex - }); - - const rowRenderer = ({ index: rowIndex, _isScrolling, key, style, parent }) => { - const text = rows[rowIndex][0]; - - return ( - - - - {columns.map((col, index) => ( - {text} - ))} - - - ); - }; - - const scrollableContainerStyle = { - height: 500 /* important note: the scrollable container should have some sort of fixed height, or it should be wrapped in container that is smaller than ReactVirtualized__VirtualGrid container and has overflow visible if using the Window Scroller. See WindowScroller.example.css */, - overflowX: 'auto', - overflowY: 'scroll', - scrollBehavior: 'smooth', - WebkitOverflowScrolling: 'touch', - position: 'relative' - }; - - return ( -
- - - - - - ))} - - -
Virtualized table with composable table components
- {columns.map((col, index) => ( - {col}
- - {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => ( - - {({ width }) => ( -
- -
- )} - - )} - -
- ); -}; diff --git a/packages/module/patternfly-docs/content/examples/VirtualizedTable.md b/packages/module/patternfly-docs/content/examples/VirtualizedTable.md index 9f40ff3..92cecd2 100644 --- a/packages/module/patternfly-docs/content/examples/VirtualizedTable.md +++ b/packages/module/patternfly-docs/content/examples/VirtualizedTable.md @@ -32,11 +32,6 @@ import './VirtualGrid.example.css'; ```js file="./Basic.tsx" ``` -### Using composable table components - -```js file="./UsingComposableTableComponents.tsx" -``` - ### Sortable ```js file="./Sortable.tsx" diff --git a/packages/module/patternfly-docs/content/examples/WindowScroller.md b/packages/module/patternfly-docs/content/examples/WindowScroller.md index dbfed96..8e47f9b 100644 --- a/packages/module/patternfly-docs/content/examples/WindowScroller.md +++ b/packages/module/patternfly-docs/content/examples/WindowScroller.md @@ -22,10 +22,5 @@ import './WindowScroller.example.css'; ### Window scroller -```js file="./WindowScroller.tsx" -``` - -### Using composable table components - -```js file="UsingComposableTableComponentsDemo.tsx" +```js file="WindowScroller.tsx" ``` diff --git a/packages/module/patternfly-docs/content/examples/WindowScroller.tsx b/packages/module/patternfly-docs/content/examples/WindowScroller.tsx index 70356fe..544124f 100644 --- a/packages/module/patternfly-docs/content/examples/WindowScroller.tsx +++ b/packages/module/patternfly-docs/content/examples/WindowScroller.tsx @@ -1,170 +1,116 @@ import React from 'react'; -import { debounce } from '@patternfly/react-core'; -import { TableGridBreakpoint } from '@patternfly/react-table'; -import { Table as TableDeprecated, TableHeader as TableHeaderDeprecated } from '@patternfly/react-table/deprecated'; import { CellMeasurerCache, CellMeasurer } from 'react-virtualized'; import { AutoSizer, VirtualTableBody, WindowScroller } from '@patternfly/react-virtualized-extension'; +import { Table, Thead, Tr, Th, Td, Caption, TableGridBreakpoint } from '@patternfly/react-table'; -export class WindowScrollerExample extends React.Component { - constructor(props) { - super(props); - const rows = []; - for (let i = 0; i < 100000; i++) { - const cells = []; - const num = Math.floor(Math.random() * Math.floor(2)) + 1; - for (let j = 0; j < 5; j++) { - const cellValue = i.toString() + ' Arma virumque cano Troiae qui primus ab oris. '.repeat(num); - cells.push(cellValue); - } - rows.push({ - id: `window-scroller-row-${i}`, - cells - }); - - this._cellMeasurementCache = new CellMeasurerCache({ - fixedWidth: true, - minHeight: 44, - keyMapper: (rowIndex) => rowIndex - }); +export const WindowScrollerExample = () => { + const [scrollableElement, setScrollableElement] = React.useState(); + React.useEffect(() => { + const scrollableElement = document.getElementById('content-scrollable-2'); + setScrollableElement(scrollableElement); + }); + const rows = []; + for (let i = 0; i < 100000; i++) { + const cells = []; + const num = Math.floor(Math.random() * Math.floor(2)) + 1; + for (let j = 0; j < 5; j++) { + const cellValue = i.toString() + ' Arma virumque cano Troiae qui primus ab oris. '.repeat(num); + cells.push(cellValue); } - - this.state = { - scrollToIndex: -1, // can be used to programmatically set current index - scrollableElement: null, - columns: [ - { - title: 'Repositories', - props: { className: 'pf-v5-c-table__th pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' } - }, - { - title: 'Branches', - props: { className: 'pf-v5-c-table__th pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' } - }, - { - title: 'Pull requests', - props: { className: 'pf-v5-c-table__th pf-m-4-col-on-md pf-m-4-col-on-lg pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-md' } - }, - { - title: 'Workspaces', - props: { className: 'pf-v5-c-table__th pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-lg' } - }, - { title: 'Last Commit', props: { className: 'pf-v5-c-table__th pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-xl' } } - ], - rows - }; - - this._handleResize = debounce(this._handleResize.bind(this), 100); - this._bindBodyRef = this._bindBodyRef.bind(this); + rows.push(cells); } + const [selected, setSelected] = React.useState(rows.map((_row) => false)); + const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit']; + const scrollToIndex = -1; // can be used to programmatically set current index - componentDidMount() { - // re-render after resize - window.addEventListener('resize', this._handleResize); - - this.setState({ scrollableElement: document.getElementById('content-scrollable-1') }); - } + const onSelect = (event, isSelected, rowId) => { + setSelected(selected.map((sel, index) => (index === rowId ? isSelected : sel))); + }; - componentWillUnmount() { - window.removeEventListener('resize', this._handleResize); - } + const measurementCache = new CellMeasurerCache({ + fixedWidth: true, + minHeight: 44, + keyMapper: (rowIndex) => rowIndex + }); - _handleResize() { - this._cellMeasurementCache.clearAll(); - this._bodyRef.recomputeVirtualGridSize(); - } - - _bindBodyRef(ref) { - this._bodyRef = ref; - } - - render() { - const { scrollToIndex, columns, rows, scrollableElement } = this.state; - - const rowRenderer = ({ index, _isScrolling, key, style, parent }) => { - const { rows, columns } = this.state; - const text = rows[index].cells[0]; - - return ( - - - - {text} - - - {text} - - - {text} - - - {text} - - - {text} - - - - ); - }; + const rowRenderer = ({ index: rowIndex, _isScrolling, key, style, parent }) => { + const text = rows[rowIndex][0]; return ( -
-
- - - - {scrollableElement && ( - - {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => ( - - {({ width }) => ( -
- -
- )} - - )} - - )} -
-
+ + + + {columns.map((col, index) => ( + {text} + ))} + + ); - } -} + }; + + const scrollableContainerStyle = { + height: 500 /* important note: the scrollable container should have some sort of fixed height, or it should be wrapped in container that is smaller than ReactVirtualized__VirtualGrid container and has overflow visible if using the Window Scroller. See WindowScroller.example.css */, + overflowX: 'auto', + overflowY: 'scroll', + scrollBehavior: 'smooth', + WebkitOverflowScrolling: 'touch', + position: 'relative' + }; + + return ( +
+ + + + + + ))} + + +
Virtualized table with composable table components
+ {columns.map((col, index) => ( + {col}
+ + {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => ( + + {({ width }) => ( +
+ +
+ )} + + )} + +
+ ); +}; diff --git a/packages/module/patternfly-docs/generated/extensions/virtual-scroll-table/react.js b/packages/module/patternfly-docs/generated/extensions/virtual-scroll-table/react.js index 3a45cb6..56f4def 100644 --- a/packages/module/patternfly-docs/generated/extensions/virtual-scroll-table/react.js +++ b/packages/module/patternfly-docs/generated/extensions/virtual-scroll-table/react.js @@ -175,7 +175,6 @@ const pageData = { ], "examples": [ "Basic", - "Using composable table components", "Sortable", "Selectable", "Actions", @@ -212,10 +211,6 @@ pageData.examples = { 'Basic': props => {\n // this StringArray type is just needed because something in our documentation framework crashes when it encounters\n // a string[][] type\n type StringArray = string[];\n const rows: StringArray[] = [];\n for (let i = 0; i < 100; i++) {\n rows.push([`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]);\n }\n\n const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit'];\n\n const measurementCache = new CellMeasurerCache({\n fixedWidth: true,\n minHeight: 44,\n keyMapper: (rowIndex) => rowIndex\n });\n\n const rowRenderer = ({ index: rowIndex, _isScrolling, key, style, parent }) => (\n \n \n {columns.map((col, index) => (\n {rows[rowIndex][index]}\n ))}\n \n \n );\n\n return (\n
\n \n \n \n \n {columns.map((col, index) => (\n \n ))}\n \n \n
Simple Table
{col}
\n \n {({ width }) => (\n \n )}\n \n
\n );\n};\n","title":"Basic","lang":"js"}}> - , - 'Using composable table components': props => - {\n const rows = [];\n for (let i = 0; i < 100; i++) {\n rows.push([`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]);\n }\n const [selected, setSelected] = React.useState(rows.map((_row) => false));\n const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit'];\n\n const onSelect = (event, isSelected, rowId) => {\n setSelected(selected.map((sel, index) => (index === rowId ? isSelected : sel)));\n };\n\n const measurementCache = new CellMeasurerCache({\n fixedWidth: true,\n minHeight: 44,\n keyMapper: (rowIndex) => rowIndex\n });\n\n const rowRenderer = ({ index: rowIndex, _isScrolling, key, style, parent }) => (\n \n \n \n {columns.map((col, index) => (\n {rows[rowIndex][index]}\n ))}\n \n \n );\n\n return (\n
\n \n \n \n \n \n ))}\n \n \n
Virtualized table with composable table components
\n {columns.map((col, index) => (\n {col}
\n \n {({ width }) => (\n \n )}\n \n
\n );\n};\n","title":"Using composable table components","lang":"js"}}> - , 'Sortable': props => {\n const rows: { id: string; cells: string[] }[] = [];\n for (let i = 0; i < 100; i++) {\n rows.push({\n id: `sortable-row-${i}`,\n cells: [`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]\n });\n }\n\n const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit'];\n\n const [activeSortIndex, setActiveSortIndex] = React.useState(-1);\n\n // Sort direction of the currently sorted column\n const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | undefined>();\n\n const getRowIndex = (str: string) => Number(str?.split('-')[1]);\n\n const getSortParams = (columnIndex: number): ThProps['sort'] => ({\n sortBy: {\n index: activeSortIndex,\n direction: activeSortDirection\n },\n onSort: (_event, index, direction) => {\n setActiveSortIndex(index);\n setActiveSortDirection(direction as 'desc' | 'asc');\n },\n columnIndex\n });\n\n if (activeSortIndex !== null) {\n rows.sort((a, b) => {\n const aValue = a.cells[activeSortIndex];\n const bValue = b.cells[activeSortIndex];\n\n const aValueIndex = getRowIndex(aValue);\n const bValueIndex = getRowIndex(bValue);\n\n if (activeSortDirection === 'asc') {\n return aValueIndex - bValueIndex;\n }\n\n return bValueIndex - aValueIndex;\n });\n }\n\n const measurementCache = new CellMeasurerCache({\n fixedWidth: true,\n minHeight: 44,\n keyMapper: (rowIndex) => rowIndex\n });\n\n const rowRenderer = ({ index: rowIndex, _isScrolling, key, style, parent }) => (\n \n \n {columns.map((col, index) => (\n {rows[rowIndex].cells[index]}\n ))}\n \n \n );\n return (\n
\n \n \n \n \n \n \n \n \n \n \n \n
Sortable Virtualized Table
{columns[0]}{columns[1]}{columns[2]}{columns[3]}{columns[4]}
\n \n {({ width }) => (\n ref}\n className=\"pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller\"\n deferredMeasurementCache={measurementCache}\n rowHeight={measurementCache.rowHeight}\n height={400}\n overscanRowCount={2}\n columnCount={1}\n rows={rows}\n rowCount={rows.length}\n rowRenderer={rowRenderer}\n width={width}\n role=\"grid\"\n />\n )}\n \n
\n );\n};\n","title":"Sortable","lang":"js"}}> @@ -250,7 +245,6 @@ const Component = () => ( {`Examples`} {React.createElement(pageData.examples["Basic"])} - {React.createElement(pageData.examples["Using composable table components"])} {React.createElement(pageData.examples["Sortable"])} {React.createElement(pageData.examples["Selectable"])} {React.createElement(pageData.examples["Actions"])} diff --git a/packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js b/packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js index 6a88167..1baeffa 100644 --- a/packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js +++ b/packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js @@ -163,8 +163,7 @@ const pageData = { } ], "examples": [ - "Window scroller", - "Using composable table components" + "Window scroller" ] }; pageData.liveContext = { @@ -179,11 +178,7 @@ pageData.liveContext = { pageData.relativeImports = "import 'content/examples/./VirtualGrid.example.css';,import 'content/examples/./WindowScroller.example.css';" pageData.examples = { 'Window scroller': props => - rowIndex\n });\n }\n\n this.state = {\n scrollToIndex: -1, // can be used to programmatically set current index\n scrollableElement: null,\n columns: [\n {\n title: 'Repositories',\n props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }\n },\n {\n title: 'Branches',\n props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }\n },\n {\n title: 'Pull requests',\n props: { className: 'pf-m-4-col-on-md pf-m-4-col-on-lg pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-md' }\n },\n {\n title: 'Workspaces',\n props: { className: 'pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-lg' }\n },\n { title: 'Last Commit', props: { className: 'pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-xl' } }\n ],\n rows\n };\n\n this._handleResize = debounce(this._handleResize.bind(this), 100);\n this._bindBodyRef = this._bindBodyRef.bind(this);\n }\n\n componentDidMount() {\n // re-render after resize\n window.addEventListener('resize', this._handleResize);\n\n this.setState({ scrollableElement: document.getElementById('content-scrollable-1') });\n }\n\n componentWillUnmount() {\n window.removeEventListener('resize', this._handleResize);\n }\n\n _handleResize() {\n this._cellMeasurementCache.clearAll();\n this._bodyRef.recomputeVirtualGridSize();\n }\n\n _bindBodyRef(ref) {\n this._bodyRef = ref;\n }\n\n render() {\n const { scrollToIndex, columns, rows, scrollableElement } = this.state;\n\n const rowRenderer = ({ index, _isScrolling, key, style, parent }) => {\n const { rows, columns } = this.state;\n const text = rows[index].cells[0];\n\n return (\n \n \n \n {text}\n \n \n {text}\n \n \n {text}\n \n \n {text}\n \n \n {text}\n \n \n \n );\n };\n\n return (\n \n
\n \n \n \n {scrollableElement && (\n \n {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (\n \n {({ width }) => (\n
\n \n
\n )}\n \n )}\n \n )}\n
\n \n );\n }\n}\n","title":"Window scroller","lang":"js"}}> - - , - 'Using composable table components': props => - {\n const [scrollableElement, setScrollableElement] = React.useState();\n React.useEffect(() => {\n const scrollableElement = document.getElementById('content-scrollable-2');\n setScrollableElement(scrollableElement);\n });\n const rows = [];\n for (let i = 0; i < 100000; i++) {\n const cells = [];\n const num = Math.floor(Math.random() * Math.floor(2)) + 1;\n for (let j = 0; j < 5; j++) {\n const cellValue = i.toString() + ' Arma virumque cano Troiae qui primus ab oris. '.repeat(num);\n cells.push(cellValue);\n }\n rows.push(cells);\n }\n const [selected, setSelected] = React.useState(rows.map((_row) => false));\n const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit'];\n const scrollToIndex = -1; // can be used to programmatically set current index\n\n const onSelect = (event, isSelected, rowId) => {\n setSelected(selected.map((sel, index) => (index === rowId ? isSelected : sel)));\n };\n\n const measurementCache = new CellMeasurerCache({\n fixedWidth: true,\n minHeight: 44,\n keyMapper: (rowIndex) => rowIndex\n });\n\n const rowRenderer = ({ index: rowIndex, _isScrolling, key, style, parent }) => {\n const text = rows[rowIndex][0];\n\n return (\n \n \n \n {columns.map((col, index) => (\n {text}\n ))}\n \n \n );\n };\n\n const scrollableContainerStyle = {\n height: 500 /* important note: the scrollable container should have some sort of fixed height, or it should be wrapped in container that is smaller than ReactVirtualized__VirtualGrid container and has overflow visible if using the Window Scroller. See WindowScroller.example.css */,\n overflowX: 'auto',\n overflowY: 'scroll',\n scrollBehavior: 'smooth',\n WebkitOverflowScrolling: 'touch',\n position: 'relative'\n };\n\n return (\n \n \n \n \n \n \n ))}\n \n \n
Virtualized table with composable table components
\n {columns.map((col, index) => (\n {col}
\n \n {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (\n \n {({ width }) => (\n
\n \n
\n )}\n \n )}\n \n \n );\n};\n","title":"Using composable table components","lang":"js"}}> + {\n const [scrollableElement, setScrollableElement] = React.useState();\n React.useEffect(() => {\n const scrollableElement = document.getElementById('content-scrollable-2');\n setScrollableElement(scrollableElement);\n });\n const rows = [];\n for (let i = 0; i < 100000; i++) {\n const cells = [];\n const num = Math.floor(Math.random() * Math.floor(2)) + 1;\n for (let j = 0; j < 5; j++) {\n const cellValue = i.toString() + ' Arma virumque cano Troiae qui primus ab oris. '.repeat(num);\n cells.push(cellValue);\n }\n rows.push(cells);\n }\n const [selected, setSelected] = React.useState(rows.map((_row) => false));\n const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit'];\n const scrollToIndex = -1; // can be used to programmatically set current index\n\n const onSelect = (event, isSelected, rowId) => {\n setSelected(selected.map((sel, index) => (index === rowId ? isSelected : sel)));\n };\n\n const measurementCache = new CellMeasurerCache({\n fixedWidth: true,\n minHeight: 44,\n keyMapper: (rowIndex) => rowIndex\n });\n\n const rowRenderer = ({ index: rowIndex, _isScrolling, key, style, parent }) => {\n const text = rows[rowIndex][0];\n\n return (\n \n \n \n {columns.map((col, index) => (\n {text}\n ))}\n \n \n );\n };\n\n const scrollableContainerStyle = {\n height: 500 /* important note: the scrollable container should have some sort of fixed height, or it should be wrapped in container that is smaller than ReactVirtualized__VirtualGrid container and has overflow visible if using the Window Scroller. See WindowScroller.example.css */,\n overflowX: 'auto',\n overflowY: 'scroll',\n scrollBehavior: 'smooth',\n WebkitOverflowScrolling: 'touch',\n position: 'relative'\n };\n\n return (\n \n \n \n \n \n \n ))}\n \n \n
Virtualized table with composable table components
\n {columns.map((col, index) => (\n {col}
\n \n {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (\n \n {({ width }) => (\n
\n \n
\n )}\n \n )}\n \n \n );\n};\n","title":"Window scroller","lang":"js"}}> }; @@ -212,7 +207,6 @@ This package is currently an extension. Extension components do not undergo the {`Examples`} {React.createElement(pageData.examples["Window scroller"])} - {React.createElement(pageData.examples["Using composable table components"])} ); Component.displayName = 'ExtensionsVirtualScrollWindowScrollerReactDocs'; diff --git a/packages/module/patternfly-docs/generated/index.js b/packages/module/patternfly-docs/generated/index.js index c96b05f..37e5fe5 100644 --- a/packages/module/patternfly-docs/generated/index.js +++ b/packages/module/patternfly-docs/generated/index.js @@ -2,8 +2,8 @@ module.exports = { '/extensions/virtual-scroll-table/react': { id: "Virtual scroll table", title: "Virtual scroll table", - toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Using composable table components"},{"text":"Sortable"},{"text":"Selectable"},{"text":"Actions"},{"text":"Filterable with WindowScroller"}]], - examples: ["Basic","Using composable table components","Sortable","Selectable","Actions","Filterable with WindowScroller"], + toc: [{"text":"Examples"},[{"text":"Basic"},{"text":"Sortable"},{"text":"Selectable"},{"text":"Actions"},{"text":"Filterable with WindowScroller"}]], + examples: ["Basic","Sortable","Selectable","Actions","Filterable with WindowScroller"], section: "extensions", subsection: "", source: "react", @@ -13,8 +13,8 @@ module.exports = { '/extensions/virtual-scroll-window-scroller/react': { id: "Virtual scroll window scroller", title: "Virtual scroll window scroller", - toc: [{"text":"Examples"},[{"text":"Window scroller"},{"text":"Using composable table components"}]], - examples: ["Window scroller","Using composable table components"], + toc: [{"text":"Examples"},[{"text":"Window scroller"}]], + examples: ["Window scroller"], section: "extensions", subsection: "", source: "react", From 94271c0ae0c7d9d995edc4ddb58a2f4b740cbc0b Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Tue, 5 Dec 2023 17:34:42 -0500 Subject: [PATCH 3/5] chore(docs): fix typescript errors in WindowScroller demo --- .../content/examples/WindowScroller.tsx | 29 ++++++++++++++----- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/packages/module/patternfly-docs/content/examples/WindowScroller.tsx b/packages/module/patternfly-docs/content/examples/WindowScroller.tsx index 544124f..403fbe9 100644 --- a/packages/module/patternfly-docs/content/examples/WindowScroller.tsx +++ b/packages/module/patternfly-docs/content/examples/WindowScroller.tsx @@ -4,14 +4,19 @@ import { AutoSizer, VirtualTableBody, WindowScroller } from '@patternfly/react-v import { Table, Thead, Tr, Th, Td, Caption, TableGridBreakpoint } from '@patternfly/react-table'; export const WindowScrollerExample = () => { - const [scrollableElement, setScrollableElement] = React.useState(); + const [scrollableElement, setScrollableElement] = React.useState(); React.useEffect(() => { - const scrollableElement = document.getElementById('content-scrollable-2'); + const scrollableElement = document.getElementById('content-scrollable-2') as HTMLElement; setScrollableElement(scrollableElement); - }); - const rows = []; + }, []); + + // this StringArray type is just needed because something in our documentation framework crashes when it encounters + // a string[][] type + type StringArray = string[]; + const rows: StringArray[] = []; + for (let i = 0; i < 100000; i++) { - const cells = []; + const cells: string[] = []; const num = Math.floor(Math.random() * Math.floor(2)) + 1; for (let j = 0; j < 5; j++) { const cellValue = i.toString() + ' Arma virumque cano Troiae qui primus ab oris. '.repeat(num); @@ -19,6 +24,7 @@ export const WindowScrollerExample = () => { } rows.push(cells); } + const [selected, setSelected] = React.useState(rows.map((_row) => false)); const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit']; const scrollToIndex = -1; // can be used to programmatically set current index @@ -55,7 +61,16 @@ export const WindowScrollerExample = () => { ); }; - const scrollableContainerStyle = { + interface ScrollableContainerStyle { + height: number; + overflowX: 'auto'; + overflowY: 'scroll'; + scrollBehavior: 'smooth'; + WebkitOverflowScrolling: 'touch'; + position: 'relative'; + } + + const scrollableContainerStyle: ScrollableContainerStyle = { height: 500 /* important note: the scrollable container should have some sort of fixed height, or it should be wrapped in container that is smaller than ReactVirtualized__VirtualGrid container and has overflow visible if using the Window Scroller. See WindowScroller.example.css */, overflowX: 'auto', overflowY: 'scroll', @@ -86,7 +101,7 @@ export const WindowScrollerExample = () => { {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => ( {({ width }) => ( -
+
void}> Date: Wed, 6 Dec 2023 15:38:39 -0500 Subject: [PATCH 4/5] remove redundant selectable logic from windowscroller demo --- .../content/examples/WindowScroller.tsx | 14 -------------- .../virtual-scroll-window-scroller/react.js | 2 +- 2 files changed, 1 insertion(+), 15 deletions(-) diff --git a/packages/module/patternfly-docs/content/examples/WindowScroller.tsx b/packages/module/patternfly-docs/content/examples/WindowScroller.tsx index 403fbe9..e70318c 100644 --- a/packages/module/patternfly-docs/content/examples/WindowScroller.tsx +++ b/packages/module/patternfly-docs/content/examples/WindowScroller.tsx @@ -25,14 +25,9 @@ export const WindowScrollerExample = () => { rows.push(cells); } - const [selected, setSelected] = React.useState(rows.map((_row) => false)); const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit']; const scrollToIndex = -1; // can be used to programmatically set current index - const onSelect = (event, isSelected, rowId) => { - setSelected(selected.map((sel, index) => (index === rowId ? isSelected : sel))); - }; - const measurementCache = new CellMeasurerCache({ fixedWidth: true, minHeight: 44, @@ -45,14 +40,6 @@ export const WindowScrollerExample = () => { return ( - {columns.map((col, index) => ( {text} ))} @@ -90,7 +77,6 @@ export const WindowScrollerExample = () => { Virtualized table with composable table components - {columns.map((col, index) => ( {col} ))} diff --git a/packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js b/packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js index 1baeffa..a72e826 100644 --- a/packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js +++ b/packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js @@ -178,7 +178,7 @@ pageData.liveContext = { pageData.relativeImports = "import 'content/examples/./VirtualGrid.example.css';,import 'content/examples/./WindowScroller.example.css';" pageData.examples = { 'Window scroller': props => - {\n const [scrollableElement, setScrollableElement] = React.useState();\n React.useEffect(() => {\n const scrollableElement = document.getElementById('content-scrollable-2');\n setScrollableElement(scrollableElement);\n });\n const rows = [];\n for (let i = 0; i < 100000; i++) {\n const cells = [];\n const num = Math.floor(Math.random() * Math.floor(2)) + 1;\n for (let j = 0; j < 5; j++) {\n const cellValue = i.toString() + ' Arma virumque cano Troiae qui primus ab oris. '.repeat(num);\n cells.push(cellValue);\n }\n rows.push(cells);\n }\n const [selected, setSelected] = React.useState(rows.map((_row) => false));\n const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit'];\n const scrollToIndex = -1; // can be used to programmatically set current index\n\n const onSelect = (event, isSelected, rowId) => {\n setSelected(selected.map((sel, index) => (index === rowId ? isSelected : sel)));\n };\n\n const measurementCache = new CellMeasurerCache({\n fixedWidth: true,\n minHeight: 44,\n keyMapper: (rowIndex) => rowIndex\n });\n\n const rowRenderer = ({ index: rowIndex, _isScrolling, key, style, parent }) => {\n const text = rows[rowIndex][0];\n\n return (\n \n \n \n {columns.map((col, index) => (\n {text}\n ))}\n \n \n );\n };\n\n const scrollableContainerStyle = {\n height: 500 /* important note: the scrollable container should have some sort of fixed height, or it should be wrapped in container that is smaller than ReactVirtualized__VirtualGrid container and has overflow visible if using the Window Scroller. See WindowScroller.example.css */,\n overflowX: 'auto',\n overflowY: 'scroll',\n scrollBehavior: 'smooth',\n WebkitOverflowScrolling: 'touch',\n position: 'relative'\n };\n\n return (\n \n \n \n \n \n \n ))}\n \n \n
Virtualized table with composable table components
\n {columns.map((col, index) => (\n {col}
\n \n {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (\n \n {({ width }) => (\n
\n \n
\n )}\n \n )}\n \n
\n );\n};\n","title":"Window scroller","lang":"js"}}> + {\n const [scrollableElement, setScrollableElement] = React.useState();\n React.useEffect(() => {\n const scrollableElement = document.getElementById('content-scrollable-2') as HTMLElement;\n setScrollableElement(scrollableElement);\n }, []);\n \n // this StringArray type is just needed because something in our documentation framework crashes when it encounters\n // a string[][] type\n type StringArray = string[];\n const rows: StringArray[] = [];\n\n for (let i = 0; i < 100000; i++) {\n const cells: string[] = [];\n const num = Math.floor(Math.random() * Math.floor(2)) + 1;\n for (let j = 0; j < 5; j++) {\n const cellValue = i.toString() + ' Arma virumque cano Troiae qui primus ab oris. '.repeat(num);\n cells.push(cellValue);\n }\n rows.push(cells);\n }\n\n const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit'];\n const scrollToIndex = -1; // can be used to programmatically set current index\n\n const measurementCache = new CellMeasurerCache({\n fixedWidth: true,\n minHeight: 44,\n keyMapper: (rowIndex) => rowIndex\n });\n\n const rowRenderer = ({ index: rowIndex, _isScrolling, key, style, parent }) => {\n const text = rows[rowIndex][0];\n\n return (\n \n \n {columns.map((col, index) => (\n {text}\n ))}\n \n \n );\n };\n\n interface ScrollableContainerStyle {\n height: number;\n overflowX: 'auto';\n overflowY: 'scroll';\n scrollBehavior: 'smooth';\n WebkitOverflowScrolling: 'touch';\n position: 'relative';\n }\n\n const scrollableContainerStyle: ScrollableContainerStyle = {\n height: 500 /* important note: the scrollable container should have some sort of fixed height, or it should be wrapped in container that is smaller than ReactVirtualized__VirtualGrid container and has overflow visible if using the Window Scroller. See WindowScroller.example.css */,\n overflowX: 'auto',\n overflowY: 'scroll',\n scrollBehavior: 'smooth',\n WebkitOverflowScrolling: 'touch',\n position: 'relative'\n };\n\n return (\n \n \n \n \n \n {columns.map((col, index) => (\n \n ))}\n \n \n
Virtualized table with composable table components
{col}
\n \n {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (\n \n {({ width }) => (\n
void}>\n \n
\n )}\n \n )}\n \n
\n );\n};\n","title":"Window scroller","lang":"js"}}> }; From 52ae4c5edc307be5f17ebd071c498f1bf5f15da0 Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Wed, 6 Dec 2023 15:44:00 -0500 Subject: [PATCH 5/5] Revert caption to initial --- .../patternfly-docs/content/examples/WindowScroller.tsx | 7 +++++-- .../extensions/virtual-scroll-window-scroller/react.js | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/module/patternfly-docs/content/examples/WindowScroller.tsx b/packages/module/patternfly-docs/content/examples/WindowScroller.tsx index e70318c..e872ab3 100644 --- a/packages/module/patternfly-docs/content/examples/WindowScroller.tsx +++ b/packages/module/patternfly-docs/content/examples/WindowScroller.tsx @@ -9,7 +9,7 @@ export const WindowScrollerExample = () => { const scrollableElement = document.getElementById('content-scrollable-2') as HTMLElement; setScrollableElement(scrollableElement); }, []); - + // this StringArray type is just needed because something in our documentation framework crashes when it encounters // a string[][] type type StringArray = string[]; @@ -74,7 +74,10 @@ export const WindowScrollerExample = () => { style={scrollableContainerStyle} > - + {columns.map((col, index) => ( diff --git a/packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js b/packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js index a72e826..f731118 100644 --- a/packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js +++ b/packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js @@ -178,7 +178,7 @@ pageData.liveContext = { pageData.relativeImports = "import 'content/examples/./VirtualGrid.example.css';,import 'content/examples/./WindowScroller.example.css';" pageData.examples = { 'Window scroller': props => - {\n const [scrollableElement, setScrollableElement] = React.useState();\n React.useEffect(() => {\n const scrollableElement = document.getElementById('content-scrollable-2') as HTMLElement;\n setScrollableElement(scrollableElement);\n }, []);\n \n // this StringArray type is just needed because something in our documentation framework crashes when it encounters\n // a string[][] type\n type StringArray = string[];\n const rows: StringArray[] = [];\n\n for (let i = 0; i < 100000; i++) {\n const cells: string[] = [];\n const num = Math.floor(Math.random() * Math.floor(2)) + 1;\n for (let j = 0; j < 5; j++) {\n const cellValue = i.toString() + ' Arma virumque cano Troiae qui primus ab oris. '.repeat(num);\n cells.push(cellValue);\n }\n rows.push(cells);\n }\n\n const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit'];\n const scrollToIndex = -1; // can be used to programmatically set current index\n\n const measurementCache = new CellMeasurerCache({\n fixedWidth: true,\n minHeight: 44,\n keyMapper: (rowIndex) => rowIndex\n });\n\n const rowRenderer = ({ index: rowIndex, _isScrolling, key, style, parent }) => {\n const text = rows[rowIndex][0];\n\n return (\n \n \n {columns.map((col, index) => (\n \n ))}\n \n \n );\n };\n\n interface ScrollableContainerStyle {\n height: number;\n overflowX: 'auto';\n overflowY: 'scroll';\n scrollBehavior: 'smooth';\n WebkitOverflowScrolling: 'touch';\n position: 'relative';\n }\n\n const scrollableContainerStyle: ScrollableContainerStyle = {\n height: 500 /* important note: the scrollable container should have some sort of fixed height, or it should be wrapped in container that is smaller than ReactVirtualized__VirtualGrid container and has overflow visible if using the Window Scroller. See WindowScroller.example.css */,\n overflowX: 'auto',\n overflowY: 'scroll',\n scrollBehavior: 'smooth',\n WebkitOverflowScrolling: 'touch',\n position: 'relative'\n };\n\n return (\n \n
Virtualized table with composable table components + WindowScroller allows scrolling of a parent container or the window instead of tbody. It also can be used to + dynamically size the table to the size of the scroll element. +
{text}
\n \n \n \n {columns.map((col, index) => (\n \n ))}\n \n \n
Virtualized table with composable table components
{col}
\n \n {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (\n \n {({ width }) => (\n
void}>\n \n
\n )}\n \n )}\n \n \n );\n};\n","title":"Window scroller","lang":"js"}}> + {\n const [scrollableElement, setScrollableElement] = React.useState();\n React.useEffect(() => {\n const scrollableElement = document.getElementById('content-scrollable-2') as HTMLElement;\n setScrollableElement(scrollableElement);\n }, []);\n\n // this StringArray type is just needed because something in our documentation framework crashes when it encounters\n // a string[][] type\n type StringArray = string[];\n const rows: StringArray[] = [];\n\n for (let i = 0; i < 100000; i++) {\n const cells: string[] = [];\n const num = Math.floor(Math.random() * Math.floor(2)) + 1;\n for (let j = 0; j < 5; j++) {\n const cellValue = i.toString() + ' Arma virumque cano Troiae qui primus ab oris. '.repeat(num);\n cells.push(cellValue);\n }\n rows.push(cells);\n }\n\n const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit'];\n const scrollToIndex = -1; // can be used to programmatically set current index\n\n const measurementCache = new CellMeasurerCache({\n fixedWidth: true,\n minHeight: 44,\n keyMapper: (rowIndex) => rowIndex\n });\n\n const rowRenderer = ({ index: rowIndex, _isScrolling, key, style, parent }) => {\n const text = rows[rowIndex][0];\n\n return (\n \n \n {columns.map((col, index) => (\n {text}\n ))}\n \n \n );\n };\n\n interface ScrollableContainerStyle {\n height: number;\n overflowX: 'auto';\n overflowY: 'scroll';\n scrollBehavior: 'smooth';\n WebkitOverflowScrolling: 'touch';\n position: 'relative';\n }\n\n const scrollableContainerStyle: ScrollableContainerStyle = {\n height: 500 /* important note: the scrollable container should have some sort of fixed height, or it should be wrapped in container that is smaller than ReactVirtualized__VirtualGrid container and has overflow visible if using the Window Scroller. See WindowScroller.example.css */,\n overflowX: 'auto',\n overflowY: 'scroll',\n scrollBehavior: 'smooth',\n WebkitOverflowScrolling: 'touch',\n position: 'relative'\n };\n\n return (\n \n \n \n \n \n {columns.map((col, index) => (\n \n ))}\n \n \n
\n WindowScroller allows scrolling of a parent container or the window instead of tbody. It also can be used to\n dynamically size the table to the size of the scroll element.\n
{col}
\n \n {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (\n \n {({ width }) => (\n
void}>\n \n
\n )}\n \n )}\n \n \n );\n};\n","title":"Window scroller","lang":"js"}}> };