{"id":13513796,"url":"https://github.com/schrodinger/fixed-data-table-2","last_synced_at":"2025-04-13T22:20:17.360Z","repository":{"id":37954795,"uuid":"52289723","full_name":"schrodinger/fixed-data-table-2","owner":"schrodinger","description":"A React table component designed to allow presenting millions of rows of data.","archived":false,"fork":false,"pushed_at":"2025-03-30T23:32:55.000Z","size":18704,"stargazers_count":1292,"open_issues_count":44,"forks_count":290,"subscribers_count":33,"default_branch":"master","last_synced_at":"2025-04-13T22:18:25.749Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://schrodinger.github.io/fixed-data-table-2/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/schrodinger.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"docs/roadmap.md","authors":null,"dei":null}},"created_at":"2016-02-22T17:02:05.000Z","updated_at":"2025-04-04T19:08:48.000Z","dependencies_parsed_at":"2024-04-18T11:55:19.920Z","dependency_job_id":"d768015c-b25b-4be6-a867-7604a76e7e06","html_url":"https://github.com/schrodinger/fixed-data-table-2","commit_stats":{"total_commits":635,"total_committers":112,"mean_commits":5.669642857142857,"dds":0.8724409448818897,"last_synced_commit":"7a304004634c0131cb404bdcca6ac03b2a88c6a7"},"previous_names":[],"tags_count":186,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schrodinger%2Ffixed-data-table-2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schrodinger%2Ffixed-data-table-2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schrodinger%2Ffixed-data-table-2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/schrodinger%2Ffixed-data-table-2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/schrodinger","download_url":"https://codeload.github.com/schrodinger/fixed-data-table-2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248788934,"owners_count":21161748,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T05:00:37.850Z","updated_at":"2025-04-13T22:20:17.328Z","avatar_url":"https://github.com/schrodinger.png","language":"JavaScript","readme":"[Fixed Data Table 2](https://schrodinger.github.io/fixed-data-table-2/) for React \u0026middot; ![CI status](https://github.com/schrodinger/fixed-data-table-2/actions/workflows/build-and-run-tests.yml/badge.svg) \u0026middot; [![npm version](https://badge.fury.io/js/fixed-data-table-2.svg)](https://www.npmjs.com/package/fixed-data-table-2)\n====================================\n\n#### Fixed-Data-Table-2 is a continuation of [facebook/fixed-data-table](https://github.com/facebook/fixed-data-table).  The original repo is no longer maintained and has many pull requests awaiting response.\n\n\nFixedDataTable is a React component for building and presenting data in a flexible, powerful way. It supports standard table features, like headers, columns, rows, header groupings, and both fixed-position and scrolling columns.\n\nThe table was designed to handle thousands of rows of data without sacrificing performance. Scrolling smoothly is a first-class goal of FixedDataTable and it's architected in a way to allow for flexibility and extensibility.\n\nFeatures of FixedDataTable:\n* Fixed headers and footer\n* Both fixed and scrollable columns\n* Handling huge amounts of data\n* Variable row heights (with adaptive scroll positions)\n* Column resizing\n* Performant scrolling\n* Customizable styling\n* Jumping to a row or column\n* Controlled scroll API allows touch support\n\nThings the FixedDataTable **doesn't** do:\n* FixedDataTable does not provide a layout reflow mechanism or calculate content layout information such as width and height of the cell contents. The developer has to provide the layout information to the table instead.\n* FixedDataTable does not handle sorting of data. Instead it allows the developer to supply data getters that can be sort-, filter-, or tail-loading-aware.\n* FixedDataTable does not fetch the data (see above)\n\nThis version of FixedDataTable is maintained by Schrödinger, Inc. It is a forked version of Facebook’s FixedDataTable Repository available [here](https://github.com/facebook/fixed-data-table) available under the BSD License. Contributions and modifications to FixedDataTable are also subject to the BSD License [(see here)](#contributions).\n\nGetting started\n---------------\n\nInstall `fixed-data-table-2` using npm.\n\n```shell\nnpm install fixed-data-table-2\n```\nAdd the default stylesheet `dist/fixed-data-table.css` using a link tag or import it with a CSS module.\n\nImplementing a table involves three component types- `\u003cTable/\u003e`,`\u003cColumn/\u003e`, and `\u003cCell/\u003e`.\n\n`\u003cTable /\u003e` contains configuration information for the entire table, like dimensions and row count.\n\n```javascript\n\n  const rows =[0,1,2];\n\n  \u003cTable\n    rowHeight={50}\n    rowsCount={100}\n    width={5000}\n    height={5050}\n    headerHeight={50}\n    ...\n  \u003c/Table\u003e\n```    \n\n`\u003cColumn /\u003e` defines the way data is displayed for one column in the table, including all cell behavior for that column. Rather than manipulating each cell directly, pass a cell component as a prop to the column, and the column will render a cell for each index in the data array.\n\n```javascript\n    \u003cColumn\n      header={\u003cCell\u003eCol 1\u003c/Cell\u003e}\n      cell={\u003cCell\u003eColumn 1\u003c/Cell\u003e}\n      width={2000}\n    /\u003e\n```\nThe cell components in a column will receive the current array index of your data as a prop (`this.props.rowIndex`). Use this to access the correct value for each cell.\n```javascript\n    const rows = [0,1,2];\n    \n    \u003cColumn\n      header={\u003cCell\u003eColumn 1\u003c/Cell\u003e}\n      cell={({rowIndex, ...props}) =\u003e (\n        \u003cCell {...props}\u003e\n        {rows[rowIndex]}\n        \u003c/Cell\u003e\n      )}\n      width={2000}\n    /\u003e\n```\n\nIf your data is an array of objects, define a `columnKey` prop for each column and it too will be passed to all cells in that column.\n```javascript\n    const rows = [\n      { someKey: \"someValue\" },\n      { someKey: \"anotherValue\" },\n      { someKey: \"yetAnother\" }\n    ];\n    \n  \u003cColumn\n    header={\u003cCell\u003eCol 1\u003c/Cell\u003e}\n    columnKey=\"someKey\"\n    cell={({ rowIndex, columnKey, ...props }) =\u003e\n      \u003cCell {...props}\u003e\n        {rows[rowIndex][columnKey]}\n      \u003c/Cell\u003e}\n    width={2000}\n  /\u003e;\n\n\n```\n\nYou may find it useful to define custom Cell components, which can also be passed to the Column:\n```javascript\n    const MyCustomCell = ({ isSpecial }) =\u003e\n      \u003cCell\u003e\n        {isSpecial ? \"I'm Special\" : \"I'm Not Special\"}\n      \u003c/Cell\u003e;\n\n\n    \u003cColumn\n      header={\u003cCell\u003eCol 3\u003c/Cell\u003e}\n      cell={\u003cMyCustomCell isSpecial/\u003e}\n      width={2000}\n    /\u003e\n\n```\n\n### Code Sample\nFor more detailed examples, please see the [examples section](http://schrodinger.github.io/fixed-data-table-2/example-object-data.html) of the documentation. If you need help getting started with a React build system, we recommend [create-react-app](https://github.com/facebookincubator/create-react-app).  \n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport {Table, Column, Cell} from 'fixed-data-table-2';\nimport 'fixed-data-table-2/dist/fixed-data-table.css';\n\n\n// Table data as a list of array.\nconst rows = [\n  \"first row\",\n  \"second row\",\n  \"third row\"\n  // .... and more\n];\n\n// Custom cell implementation with special prop\nconst MyCustomCell = ({ mySpecialProp }) =\u003e\n  \u003cCell\u003e\n    {mySpecialProp === \"column2\" ? \"I'm column 2\" : \"I'm not column 2\"}\n  \u003c/Cell\u003e;\n\n// Render your table\nReactDOM.render(\n  \u003cTable\n    rowHeight={50}\n    rowsCount={rows.length}\n    width={5000}\n    height={5000}\n    headerHeight={50}\u003e\n    \u003cColumn\n      header={\u003cCell\u003eCol 1\u003c/Cell\u003e}\n      cell={\u003cCell\u003eColumn 1 static content\u003c/Cell\u003e}\n      width={2000}\n    /\u003e\n    \u003cColumn\n      header={\u003cCell\u003eCol 2\u003c/Cell\u003e}\n      cell={\u003cMyCustomCell mySpecialProp=\"column2\" /\u003e}\n      width={1000}\n    /\u003e\n    \u003cColumn\n      header={\u003cCell\u003eCol 3\u003c/Cell\u003e}\n      cell={({rowIndex, ...props}) =\u003e (\n        \u003cCell {...props}\u003e\n          Data for column 3: {rows[rowIndex]}\n        \u003c/Cell\u003e\n      )}\n      width={2000}\n    /\u003e\n  \u003c/Table\u003e,\n  document.getElementById('example')\n);\n```\n\nBrowser Support\n------------\n\n| Chrome        | Firefox           | IE  | Safari \n--- | --- | --- | --- |\n| Latest | Latest | 11+ | Unsupported* |\n\n###### * Safari may function correct, but we are not actively testing with it\n\n\u003ca name=\"contributions\"/\u003e \n\nContributions\n------------\n\nUse [GitHub issues](https://github.com/schrodinger/fixed-data-table-2/issues) for requests.\n\nWe actively welcome pull requests; learn how to [contribute](https://github.com/schrodinger/fixed-data-table-2/blob/master/CONTRIBUTING.md).\n\n**BY CONTRIBUTING TO FIXEDDATATABLE, YOU AGREE THAT YOUR CONTRIBUTIONS WILL BE LICENSED UNDER THE BSD LICENSE [(see here)](https://github.com/schrodinger/fixed-data-table-2/blob/master/LICENSE)**. Furthermore, by contributing to FixedDataTable, you hereby grant to Schrödinger and any recipients of your contributions, including but not limited to users of this site, a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable license to reproduce, prepare derivative works of, publicly display, publicly perform, sublicense, use, make and distribute your contributions and any derivative works under all intellectual property rights including but not limited to copyright and patent. **BY CONTRIBUTING TO FIXEDDATATABLE, YOU REPRESENT AND WARRANT THAT YOU ARE LEGALLY ENTITLED TO GRANT THE FOREGOING LICENSE**.\n\nChangelog\n---------\n\nChanges are tracked as [GitHub releases](https://github.com/schrodinger/fixed-data-table-2/releases).\n\n\nLicense\n-------\n\n`FixedDataTable` is [BSD-licensed](https://github.com/schrodinger/fixed-data-table-2/blob/master/LICENSE). We also provide an additional [patent grant](https://github.com/schrodinger/fixed-data-table-2/blob/master/PATENTS).\n","funding_links":[],"categories":["Data Tables \u0026 Grids","FrontEnd","JavaScript","Ranked by starred repositories"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fschrodinger%2Ffixed-data-table-2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fschrodinger%2Ffixed-data-table-2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fschrodinger%2Ffixed-data-table-2/lists"}