\n );\n }\n}\n\n\n```\n\n## Scrolling to Index\n\n`Virtualized.Body` `ref` exposes `scrollTo` method for scrolling through index. If you want to scroll based on some field value, search the dataset first and pass the resulting index here.\n\n## Define the Height of Table\n\nPlease note `height` of `` must be defined. If `height` is not defined, `style.maxHeight` will be used. In below example, we use `style.maxHeight` instead of `height`,\n\n```jsx\n/*\nimport React from 'react';\nimport * as Sticky from 'reactabular-sticky';\nimport * as Virtualized from 'reactabular-virtualized';\n\nimport { generateRows } from './helpers';\n*/\n\nconst columns = [\n {\n property: 'id',\n props: {\n style: { minWidth: 350 }\n },\n header: {\n label: 'Index'\n }\n },\n {\n property: 'name',\n props: {\n style: { minWidth: 300 }\n },\n header: {\n label: 'Name'\n }\n }\n];\nconst schema = {\n type: 'object',\n properties: {\n id: {\n type: 'string'\n },\n name: {\n type: 'string'\n }\n },\n required: ['id', 'name']\n};\nconst rows = generateRows(1000, schema);\n\nclass VirtualizedTable extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n rows,\n columns\n };\n\n this.tableHeader = null;\n this.tableBody = null;\n }\n componentDidMount() {\n // We have refs now. Force update to get those to Header/Body.\n this.forceUpdate();\n }\n render() {\n return (\n
\n );\n }\n}\n\n\n```\n\n## Scrolling within a container\n\nBy passing in a function as `container` which returns a reference to a container to `Virtualized.Body`, you can use the scrollbar of a surrounding element as the scroll for virtualization. This might be useful if you want to render multiple containers in the same scrolling area, or if you want the table to scroll along with the rest of your page.\n```jsx\n/*\nimport React from 'react';\nimport * as Sticky from 'reactabular-sticky';\nimport * as Virtualized from 'reactabular-virtualized';\nimport * as resolve from 'table-resolver';\n\nimport { generateRows } from './helpers';\n*/\n\nconst columns = [\n {\n property: 'id',\n props: {\n style: { minWidth: 50 }\n },\n header: {\n label: 'Index'\n },\n cell: {\n formatters: [\n (value, { rowIndex }) => {rowIndex}\n ]\n }\n },\n {\n property: 'name',\n props: {\n style: { minWidth: 300 }\n },\n header: {\n label: 'Name'\n }\n },\n {\n property: 'age',\n props: {\n style: { minWidth: 100 }\n },\n header: {\n label: 'Age'\n }\n },\n {\n property: 'company',\n props: {\n style: { minWidth: 400 }\n },\n header: {\n label: 'Company'\n }\n },\n {\n property: 'product',\n props: {\n style: { minWidth: 400 }\n },\n header: {\n label: 'Product'\n }\n }\n];\n\nconst schema = {\n type: 'object',\n properties: {\n id: {\n type: 'string'\n },\n name: {\n type: 'string'\n },\n product: {\n type: 'string'\n },\n company: {\n type: 'string'\n },\n age: {\n type: 'integer'\n }\n },\n required: ['id', 'name', 'product', 'company', 'age']\n};\n// Resolving indices is an optional step. You can skip it if you don't\n// rely on rowIndex anywhere. But if you do, it's good to calculate and\n// include to the data. Reactabular's rendering logic is able to pick it\n// up by convention (`_index` field).\nconst rows = resolve.resolve({ columns })(generateRows(1000, schema));\n\nclass VirtualizedTable extends React.Component {\n render() {\n return (\n
\n );\n }\n}\n\n\n```\n\n## Scrolling to Index\n\n`Virtualized.Body` `ref` exposes `scrollTo` method for scrolling through index. If you want to scroll based on some field value, search the dataset first and pass the resulting index here.\n\n## Define the Height of Table\n\nPlease note `height` of `` must be defined. If `height` is not defined, `style.maxHeight` will be used. In below example, we use `style.maxHeight` instead of `height`,\n\n```jsx\n/*\nimport React from 'react';\nimport * as Sticky from 'reactabular-sticky';\nimport * as Virtualized from 'reactabular-virtualized';\n\nimport { generateRows } from './helpers';\n*/\n\nconst columns = [\n {\n property: 'id',\n props: {\n style: { minWidth: 350 }\n },\n header: {\n label: 'Index'\n }\n },\n {\n property: 'name',\n props: {\n style: { minWidth: 300 }\n },\n header: {\n label: 'Name'\n }\n }\n];\nconst schema = {\n type: 'object',\n properties: {\n id: {\n type: 'string'\n },\n name: {\n type: 'string'\n }\n },\n required: ['id', 'name']\n};\nconst rows = generateRows(1000, schema);\n\nclass VirtualizedTable extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n rows,\n columns\n };\n\n this.tableHeader = null;\n this.tableBody = null;\n }\n componentDidMount() {\n // We have refs now. Force update to get those to Header/Body.\n this.forceUpdate();\n }\n render() {\n return (\n
\n );\n }\n}\n\n\n```\n\n## Using relative column widths\n\nYou can define column widths as percentages of the table's width, like so:\n\n```javascript\nconst columns = [\n {\n property: 'id',\n props: {\n style: { width: \"35%\" }\n },\n ...\n```\n\nTo force rows to stretch to the full width of the `tbody` container, however, a `flex`-based styling workaround is required. [This StackOverflow answer](http://stackoverflow.com/a/29512692/629578) suggests the configuration below. If this does not work for you, due to other styling constraints or concerns about browser compatibility, you may consider the other answers posted there, or you may need to take care of your column sizing and resizing in JavaScript.\n\n```css\n{\n display: flex;\n flex-flow: column;\n\n thead,\n tbody tr {\n display: table;\n table-layout: fixed;\n }\n\n thead {\n flex: 0 0 auto;\n width: 100%;\n background: #eaeaea;\n tr {\n width: calc(100% - 0.9em); /* 0.9em approximates scrollbar width */\n display: table;\n }\n }\n\n tbody {\n display: block;\n flex: 1 1 auto;\n overflow-y: scroll;\n\n tr {\n width: 100%;\n }\n }\n}\n```\n","maintainers":[{"email":"bebraw@gmail.com","name":"bebraw"},{"email":"andrey@okonet.ru","name":"okonet"}],"time":{"modified":"2022-06-26T09:03:00.377Z","created":"2016-08-31T18:01:17.655Z","2.0.5-alpha.f20b57cb":"2016-08-31T18:01:17.655Z","2.0.5-alpha.331d29a6":"2016-08-31T18:02:54.616Z","3.0.0":"2016-09-01T13:19:20.875Z","3.0.1":"2016-09-01T15:29:26.501Z","3.0.2":"2016-09-01T17:52:52.428Z","3.0.6":"2016-09-12T07:58:00.625Z","4.3.0":"2016-09-27T11:25:12.786Z","5.0.2":"2016-09-28T18:45:37.905Z","5.1.0":"2016-09-29T15:02:38.663Z","6.0.0":"2016-10-14T14:31:23.755Z","6.0.3":"2016-10-19T12:05:56.711Z","7.0.0":"2016-11-03T18:28:39.868Z","7.0.0-readme-55nN7":"2016-11-03T18:35:50.705Z","8.0.0":"2016-11-27T15:56:39.633Z","8.0.0-readme-dUqYo":"2016-11-27T16:00:03.954Z","8.0.0-readme-HsDDA":"2016-11-27T17:12:09.076Z","8.0.0-readme-npZEJ":"2016-11-29T15:08:47.586Z","8.0.0-readme-S1tT8":"2016-11-30T12:33:17.448Z","8.0.0-readme-ggjxw":"2016-11-30T19:27:57.676Z","8.0.0-readme-v1av0":"2016-11-30T19:37:19.470Z","8.0.0-readme-iJWsl":"2016-12-01T08:39:24.576Z","8.0.0-readme-pz5gk":"2016-12-01T10:35:04.493Z","8.0.0-readme-yj96D":"2016-12-05T09:12:57.177Z","8.0.0-readme-jZBLF":"2016-12-15T18:34:06.960Z","8.0.0-readme-obuIm":"2016-12-20T09:11:35.615Z","8.5.1":"2017-01-12T08:26:38.216Z","8.6.0":"2017-01-16T18:24:00.354Z","8.7.0":"2017-02-02T09:30:14.333Z","8.7.1":"2017-03-16T06:33:05.485Z","8.9.0":"2017-05-03T11:14:31.260Z","8.10.1":"2017-07-03T18:13:10.717Z","8.11.0":"2017-09-25T08:46:40.323Z","8.12.0":"2017-10-05T13:41:47.812Z","8.12.1":"2018-03-01T08:20:02.069Z","8.13.0":"2018-04-19T17:00:15.784Z","8.14.0-alpha.42d70095":"2018-04-20T15:30:00.694Z","8.14.0":"2018-05-17T18:29:37.109Z","8.15.0":"2018-09-04T16:47:27.724Z","8.16.1":"2018-10-01T18:16:12.862Z","8.17.0":"2019-01-21T11:50:33.955Z","8.18.0":"2020-01-27T15:51:04.276Z"},"homepage":"http://reactabular.js.org/","keywords":["react","reactjs","table","tables","reactabular"],"repository":{"type":"git","url":"git+https://github.com/reactabular/reactabular.git"},"author":{"name":"Juho Vepsalainen","email":"bebraw@gmail.com","url":"http://github.com/bebraw"},"bugs":{"url":"https://github.com/reactabular/reactabular/issues"},"license":"MIT","readmeFilename":"README.md"}