{"id":21846546,"url":"https://github.com/andrglo/react-window-grid","last_synced_at":"2025-04-14T13:23:06.258Z","repository":{"id":34896295,"uuid":"184800106","full_name":"andrglo/react-window-grid","owner":"andrglo","description":"A react grid with synced column and row headers based on react-window","archived":false,"fork":false,"pushed_at":"2025-03-11T13:25:44.000Z","size":1783,"stargazers_count":4,"open_issues_count":3,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-13T00:35:33.327Z","etag":null,"topics":["grid","react","react-window","spreadsheet"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andrglo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-03T18:07:50.000Z","updated_at":"2025-03-11T13:25:48.000Z","dependencies_parsed_at":"2024-11-28T00:47:52.189Z","dependency_job_id":null,"html_url":"https://github.com/andrglo/react-window-grid","commit_stats":{"total_commits":96,"total_committers":2,"mean_commits":48.0,"dds":"0.10416666666666663","last_synced_commit":"9fbfc3caa9bf5c73c7471fea118a5787b476de2b"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrglo%2Freact-window-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrglo%2Freact-window-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrglo%2Freact-window-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andrglo%2Freact-window-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andrglo","download_url":"https://codeload.github.com/andrglo/react-window-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248886793,"owners_count":21177748,"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":["grid","react","react-window","spreadsheet"],"created_at":"2024-11-27T23:14:22.903Z","updated_at":"2025-04-14T13:23:06.230Z","avatar_url":"https://github.com/andrglo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @andrglo/react-window-grid\n\nA react grid with column and row headers, like an spreadsheet\n\n\n [![npm version](https://badge.fury.io/js/%40andrglo%2Freact-window-grid.svg)](https://badge.fury.io/js/%40andrglo%2Freact-window-grid) [![Dependency Status][daviddm-image]][daviddm-url] [![CircleCI](https://circleci.com/gh/andrglo/react-window-grid.svg?style=svg)](https://circleci.com/gh/andrglo/react-window-grid) [![Coverage Status](https://coveralls.io/repos/github/andrglo/react-window-grid/badge.svg?branch=master)](https://coveralls.io/github/andrglo/react-window-grid?branch=master)\n\n\u003e See a demo at [code sandbox](https://codesandbox.io/s/reactwindowgrid-demo-ux5we)\n\n## Installation\n\n```bash\n# Yarn\nyarn add react-window\n\n# NPM\nnpm install --save react-window\n```\n\n## Usage\n\n```javascript\nimport {ReactWindowGrid} from '@andrglo/react-window-grid'\n\nconst Grid = props =\u003e (\n  \u003cReactWindowGrid\n    height={300}\n    width={300}\n    columns={props.columns}\n    recordset={props.recordset}\n    rowHeaderWidth={50}\n  /\u003e\n)\n\ncreateRoot(document.getElementById('app')).render(\n  \u003cGrid\n    columns={[\n      {id: 'column1', label: 'Column 1'},\n      {id: 'column2', label: 'Column 2'}\n    ]}\n    recordset={[\n      {column1: 'cell 1/1', column2: 'cell 1/2'},\n      {column1: 'cell 2/1', column2: 'cell 2/2'},\n      {column1: 'cell 3/1', column2: 'cell 3/2'}\n    ]}\n  /\u003e)\n```\n\n### Props\n\n| Property | Type | Description |\n|:---|:---|:---|\n| __width__* | number | The grid total width |\n| __recordset__* | array of objects | The data to be displayed |\n| __columns__* | array of objects | See table bellow |\n| __height__ | number | The grid total height |\n| __maxHeight__ | number | Limits the maximum height |\n| __rowHeaderWidth__ | number | Default is zero. Show a left header for each row and define the width |\n| __cellRenderer__ | ({rowIndex: number, columnIndex: number, style: object}) =\u003e ReactElement | Render a row header header. If not defined the record value will be showed |\n| __columnHeaderRenderer__ | ({columnIndex: number, style: object}) =\u003e ReactElement | Render a column header.  If not defined the column label or the column id will be showed |\n| __rowHeaderRenderer__ | ({rowIndex: number, style: object}) =\u003e ReactElement | Render a row header header. If not defined the row sequence begining with1 will be showed |\n| __footerRenderer__ | () =\u003e ReactElement | Render a footer after the last row |\n| __lineHeight__ | number | Define the line height. If not defined the current font size will be used|\n| __columnHeaderHeight__ | number | Define the column header height. If not defined __lineHeight__ will be used|\n| __bodyProps__ | object | Additional props to be passed to the react-window [VariableSizeGrid](https://react-window.now.sh/#/api/VariableSizeGrid) that is the grid body |\n| __columnHeaderProps__ | object | Additional props to be passed to the react-window [VariableSizeList](https://react-window.now.sh/#/api/VariableSizeList) that is the grid header |\n| __rowHeaderProps__ | object | Additional props to be passed to the react-window [VariableSizeList](https://react-window.now.sh/#/api/VariableSizeList) that is the grid row header |\n| __columnHorizontalPadding__ | number | For adjustments in column width, for example if you use borders, If not defined zero will be used |\n| __columnVerticalPadding__ | number | For adjustments in column height, for example if you use borders. If not defined zero will be used |\n\n### Column props\n\n| Property | Type | Default | Description |\n|:---|:---|:---|:---|\n| __id__* | string | The field name in the record object  |\n| __label__ | string | Label to be displayed in the header, if omitted the __id__ will be showed  |\n| __width__ | number | Cell width, if omitted will be calculated from the record field value or column label/id  |\n| __height__ | number | Cell height, if omitted will be calculated from the record field value or column label/id  |\n| __maxHeight__ | number | Cell height, when height is auto calculated it limits the maximum height |\n\n*required\n\n## How Does It Work?\n\nIt's built on top of react-window syncing one grid for the body and two lists one for the column header and the other for the row header\n\n## License\n\nMIT\n\n[daviddm-image]: https://david-dm.org/andrglo/react-window-grid.svg\n[daviddm-url]: https://david-dm.org/andrglo/react-window-grid\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrglo%2Freact-window-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrglo%2Freact-window-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrglo%2Freact-window-grid/lists"}