{"id":31267955,"url":"https://github.com/Comcast/react-data-grid","last_synced_at":"2025-09-23T17:03:01.477Z","repository":{"id":28254739,"uuid":"31764022","full_name":"Comcast/react-data-grid","owner":"Comcast","description":"Feature-rich and customizable data grid React component","archived":false,"fork":false,"pushed_at":"2025-09-22T19:05:03.000Z","size":272288,"stargazers_count":7413,"open_issues_count":59,"forks_count":2217,"subscribers_count":134,"default_branch":"main","last_synced_at":"2025-09-22T19:39:17.211Z","etag":null,"topics":["react","react-data-grid"],"latest_commit_sha":null,"homepage":"https://adazzle.github.io/react-data-grid/","language":"TypeScript","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/Comcast.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2015-03-06T10:15:04.000Z","updated_at":"2025-09-22T18:08:13.000Z","dependencies_parsed_at":"2024-01-14T17:43:59.429Z","dependency_job_id":"27bc13ef-3728-4cb0-b0f9-6c15f812777a","html_url":"https://github.com/Comcast/react-data-grid","commit_stats":{"total_commits":2362,"total_committers":146,"mean_commits":16.17808219178082,"dds":0.8056731583403896,"last_synced_commit":"dd76e81273a289f8f22065c47df714c24756f078"},"previous_names":["comcast/react-data-grid"],"tags_count":330,"template":false,"template_full_name":null,"purl":"pkg:github/Comcast/react-data-grid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Comcast%2Freact-data-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Comcast%2Freact-data-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Comcast%2Freact-data-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Comcast%2Freact-data-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Comcast","download_url":"https://codeload.github.com/Comcast/react-data-grid/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Comcast%2Freact-data-grid/sbom","scorecard":{"id":165817,"data":{"date":"2025-08-11","repo":{"name":"github.com/adazzle/react-data-grid","commit":"7324728eab0556a4f27a108935bafb9005c3b668"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":5.5,"checks":[{"name":"Maintained","score":10,"reason":"30 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":7,"reason":"Found 18/24 approved changesets -- score normalized to 7","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/ci.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/adazzle/react-data-grid/ci.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/adazzle/react-data-grid/ci.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/adazzle/react-data-grid/ci.yml/main?enable=pin","Warn: npmCommand not pinned by hash: .github/workflows/ci.yml:19","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   1 third-party GitHubAction dependencies pinned","Info:   0 out of   1 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":9,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Warn: project license file does not contain an FSF or OSI license."],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 26 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-16T14:49:28.266Z","repository_id":28254739,"created_at":"2025-08-16T14:49:28.266Z","updated_at":"2025-08-16T14:49:28.266Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":276613299,"owners_count":25673400,"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","status":"online","status_checked_at":"2025-09-23T02:00:09.130Z","response_time":73,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["react","react-data-grid"],"created_at":"2025-09-23T17:01:54.762Z","updated_at":"2025-09-23T17:03:01.470Z","avatar_url":"https://github.com/Comcast.png","language":"TypeScript","readme":"# react-data-grid\n\n[![npm-badge]][npm-url]\n[![type-badge]][npm-url]\n[![size-badge]][size-url]\n[![codecov-badge]][codecov-url]\n[![ci-badge]][ci-url]\n\n[npm-badge]: https://img.shields.io/npm/v/react-data-grid\n[npm-url]: https://www.npmjs.com/package/react-data-grid\n[size-badge]: https://img.shields.io/bundlephobia/minzip/react-data-grid\n[size-url]: https://bundlephobia.com/package/react-data-grid\n[type-badge]: https://img.shields.io/npm/types/react-data-grid\n[codecov-badge]: https://codecov.io/gh/Comcast/react-data-grid/branch/main/graph/badge.svg?token=cvrRSWiz0Q\n[codecov-url]: https://app.codecov.io/gh/Comcast/react-data-grid\n[ci-badge]: https://github.com/Comcast/react-data-grid/workflows/CI/badge.svg\n[ci-url]: https://github.com/Comcast/react-data-grid/actions\n\nThe DataGrid component is designed to handle large datasets efficiently while offering a rich set of features for customization and interactivity.\n\n## Features\n\n- [React 19.0+](package.json) support\n- Evergreen browsers and server-side rendering support\n- Tree-shaking support and only [one npm dependency](package.json) to keep your bundles slim\n- Great performance thanks to virtualization: columns and rows outside the viewport are not rendered\n- Strictly typed with TypeScript\n- [Keyboard accessibility](https://comcast.github.io/react-data-grid/#/CommonFeatures)\n- Light and dark mode support out of the box.\n- [Frozen columns](https://comcast.github.io/react-data-grid/#/CommonFeatures): Freeze columns to keep them visible during horizontal scrolling.\n- [Column resizing](https://comcast.github.io/react-data-grid/#/CommonFeatures)\n- [Multi-column sorting](https://comcast.github.io/react-data-grid/#/CommonFeatures)\n  - Click on a sortable column header to toggle between its ascending/descending sort order\n  - Ctrl+Click / Meta+Click to sort an additional column\n- [Column spanning](https://comcast.github.io/react-data-grid/#/ColumnSpanning)\n- [Column grouping](https://comcast.github.io/react-data-grid/#/ColumnGrouping)\n- [Row selection](https://comcast.github.io/react-data-grid/#/CommonFeatures)\n- [Row grouping](https://comcast.github.io/react-data-grid/#/RowGrouping)\n- [Summary rows](https://comcast.github.io/react-data-grid/#/CommonFeatures)\n- [Dynamic row heights](https://comcast.github.io/react-data-grid/#/VariableRowHeight)\n- [No rows fallback](https://comcast.github.io/react-data-grid/#/NoRows)\n- [Cell formatting](https://comcast.github.io/react-data-grid/#/CommonFeatures)\n- [Cell editing](https://comcast.github.io/react-data-grid/#/CommonFeatures)\n- [Cell copy / pasting](https://comcast.github.io/react-data-grid/#/AllFeatures)\n- [Cell value dragging / filling](https://comcast.github.io/react-data-grid/#/AllFeatures)\n- [Customizable Renderers](https://comcast.github.io/react-data-grid/#/CustomizableRenderers)\n- Right-to-left (RTL) support.\n\n## Links\n\n- [Examples website](https://comcast.github.io/react-data-grid/)\n  - [Source code](website)\n- [Changelog](CHANGELOG.md)\n- [Contributing](CONTRIBUTING.md)\n\n\u003e **Important** \u003cbr /\u003e\n\u003e `rolldown-vite` by default uses `lightningcss` to minify css which has a [bug minifying light-dark syntax](https://github.com/parcel-bundler/lightningcss/issues/873). You can switch to `esbuild` as a workaround\n\n```ts\nbuild: {\n  ....,\n  cssMinify: 'esbuild'\n}\n```\n\n## Installation\n\nInstall `react-data-grid` using your favorite package manager:\n\n```sh\nnpm i react-data-grid\n```\n\n```sh\npnpm add react-data-grid\n```\n\n```sh\nyarn add react-data-grid\n```\n\n```sh\nbun add react-data-grid\n```\n\nAdditionally, import the default styles in your application:\n\n```tsx\nimport 'react-data-grid/lib/styles.css';\n```\n\n`react-data-grid` is published as ECMAScript modules for evergreen browsers, bundlers, and server-side rendering.\n\n## Getting started\n\nHere is a basic example of how to use `react-data-grid` in your React application:\n\n```tsx\nimport 'react-data-grid/lib/styles.css';\n\nimport { DataGrid, type Column } from 'react-data-grid';\n\ninterface Row {\n  id: number;\n  title: string;\n}\n\nconst columns: Column\u003cRow\u003e[] = [\n  { key: 'id', name: 'ID' },\n  { key: 'title', name: 'Title' }\n];\n\nconst rows: Row[] = [\n  { id: 0, title: 'Example' },\n  { id: 1, title: 'Demo' }\n];\n\nfunction App() {\n  return \u003cDataGrid columns={columns} rows={rows} /\u003e;\n}\n```\n\n## Theming\n\nSet `--rdg-color-scheme: light/dark` at the `:root` to control the color theme. The light or dark themes can be enforced using the `rdg-light` or `rdg-dark` classes.\n\n## API Reference\n\n### Components\n\n#### `\u003cDataGrid /\u003e`\n\n##### DataGridProps\n\n###### `columns: readonly Column\u003cR, SR\u003e[]`\n\nSee [`Column`](#column).\n\nAn array of column definitions. Each column should have a key and name.\n\n:warning: Passing a new `columns` array will trigger a re-render for the whole grid, avoid changing it as much as possible for optimal performance.\n\n###### `rows: readonly R[]`\n\nAn array of rows, the rows data can be of any type.\n\n###### `topSummaryRows?: Maybe\u003creadonly SR[]\u003e`\n\nRows pinned at the top of the grid for summary purposes.\n\n###### `bottomSummaryRows?: Maybe\u003creadonly SR[]\u003e`\n\nRows pinned at the bottom of the grid for summary purposes.\n\n###### `rowKeyGetter?: Maybe\u003c(row: R) =\u003e K\u003e`\n\nFunction to return a unique key/identifier for each row. `rowKeyGetter` is required for row selection to work.\n\n```tsx\nimport { DataGrid } from 'react-data-grid';\n\ninterface Row {\n  id: number;\n  name: string;\n}\n\nfunction rowKeyGetter(row: Row) {\n  return row.id;\n}\n\nfunction MyGrid() {\n  return \u003cDataGrid columns={columns} rows={rows} rowKeyGetter={rowKeyGetter} /\u003e;\n}\n```\n\n:bulb: While optional, setting this prop is recommended for optimal performance as the returned value is used to set the `key` prop on the row elements.\n\n###### `onRowsChange?: Maybe\u003c(rows: R[], data: RowsChangeData\u003cR, SR\u003e) =\u003e void\u003e`\n\nCallback triggered when rows are changed.\n\nThe first parameter is a new rows array with both the updated rows and the other untouched rows.\nThe second parameter is an object with an `indexes` array highlighting which rows have changed by their index, and the `column` where the change happened.\n\n```tsx\nimport { useState } from 'react';\nimport { DataGrid } from 'react-data-grid';\n\nfunction MyGrid() {\n  const [rows, setRows] = useState(initialRows);\n\n  return \u003cDataGrid columns={columns} rows={rows} onRowsChange={setRows} /\u003e;\n}\n```\n\n###### `rowHeight?: Maybe\u003cnumber | ((row: R) =\u003e number)\u003e`\n\n**Default:** `35` pixels\n\nHeight of each row in pixels. A function can be used to set different row heights.\n\n###### `headerRowHeight?: Maybe\u003cnumber\u003e`\n\n**Default:** `35` pixels\n\nHeight of the header row in pixels.\n\n###### `summaryRowHeight?: Maybe\u003cnumber\u003e`\n\n**Default:** `35` pixels\n\nHeight of each summary row in pixels.\n\n###### `columnWidths?: Maybe\u003cColumnWidths\u003e`\n\nA map of column widths containing both measured and resized widths. If not provided then an internal state is used.\n\n```tsx\nconst [columnWidths, setColumnWidths] = useState((): ColumnWidths =\u003e new Map());\n\nfunction addNewRow() {\n  setRows(...);\n  // reset column widths after adding a new row\n  setColumnWidths(new Map());\n}\n\nreturn \u003cDataGrid columnWidths={columnWidths} onColumnWidthsChange={setColumnWidths} ... /\u003e\n```\n\n###### `onColumnWidthsChange?: Maybe\u003c(columnWidths: ColumnWidths) =\u003e void\u003e`\n\nCallback triggered when column widths change. If not provided then an internal state is used.\n\n###### `selectedRows?: Maybe\u003cReadonlySet\u003cK\u003e\u003e`\n\nA set of selected row keys. `rowKeyGetter` is required for row selection to work.\n\n###### `isRowSelectionDisabled?: Maybe\u003c(row: NoInfer\u003cR\u003e) =\u003e boolean\u003e`\n\nFunction to determine if row selection is disabled for a specific row.\n\n###### `onSelectedRowsChange?: Maybe\u003c(selectedRows: Set\u003cK\u003e) =\u003e void\u003e`\n\nCallback triggered when the selection changes.\n\n```tsx\nimport { useState } from 'react';\nimport { DataGrid, SelectColumn } from 'react-data-grid';\n\nconst rows: readonly Rows[] = [...];\n\nconst columns: readonly Column\u003cRow\u003e[] = [\n  SelectColumn,\n  // other columns\n];\n\nfunction MyGrid() {\n  const [selectedRows, setSelectedRows] = useState((): ReadonlySet\u003cnumber\u003e =\u003e new Set());\n\n  return (\n    \u003cDataGrid\n      rowKeyGetter={rowKeyGetter}\n      columns={columns}\n      rows={rows}\n      selectedRows={selectedRows}\n      isRowSelectionDisabled={isRowSelectionDisabled}\n      onSelectedRowsChange={setSelectedRows}\n    /\u003e\n  );\n}\n\nfunction rowKeyGetter(row: Row) {\n  return row.id;\n}\n\nfunction isRowSelectionDisabled(row: Row) {\n  return !row.isActive;\n}\n```\n\n###### `sortColumns?: Maybe\u003creadonly SortColumn[]\u003e`\n\nAn array of sorted columns.\n\n###### `onSortColumnsChange?: Maybe\u003c(sortColumns: SortColumn[]) =\u003e void\u003e`\n\nCallback triggered when sorting changes.\n\n```tsx\nimport { useState } from 'react';\nimport { DataGrid, SelectColumn } from 'react-data-grid';\n\nconst rows: readonly Rows[] = [...];\n\nconst columns: readonly Column\u003cRow\u003e[] = [\n  {\n    key: 'name',\n    name: 'Name',\n    sortable: true\n  },\n  // other columns\n];\n\nfunction MyGrid() {\n  const [sortColumns, setSortColumns] = useState\u003creadonly SortColumn[]\u003e([]);\n\n  return (\n    \u003cDataGrid\n      columns={columns}\n      rows={rows}\n      sortColumns={sortColumns}\n      onSortColumnsChange={setSortColumns}\n    /\u003e\n  );\n}\n```\n\nMore than one column can be sorted via `ctrl (command) + click`. To disable multiple column sorting, change the `onSortColumnsChange` function to\n\n```tsx\nfunction onSortColumnsChange(sortColumns: SortColumn[]) {\n  setSortColumns(sortColumns.slice(-1));\n}\n```\n\n###### `defaultColumnOptions?: Maybe\u003cDefaultColumnOptions\u003cR, SR\u003e\u003e`\n\nDefault options applied to all columns.\n\n```tsx\nfunction MyGrid() {\n  return (\n    \u003cDataGrid\n      columns={columns}\n      rows={rows}\n      defaultColumnOptions={{\n        minWidth: 100,\n        resizable: true,\n        sortable: true,\n        draggable: true\n      }}\n    /\u003e\n  );\n}\n```\n\n###### `onFill?: Maybe\u003c(event: FillEvent\u003cR\u003e) =\u003e R\u003e`\n\n###### `onCellMouseDown: Maybe\u003c(args: CellMouseArgs\u003cR, SR\u003e, event: CellMouseEvent) =\u003e void\u003e`\n\nCallback triggered when a pointer becomes active in a cell. The default behavior is to select the cell. Call `preventGridDefault` to prevent the default behavior.\n\n```tsx\nfunction onCellMouseDown(args: CellMouseDownArgs\u003cR, SR\u003e, event: CellMouseEvent) {\n  if (args.column.key === 'id') {\n    event.preventGridDefault();\n  }\n}\n\n\u003cDataGrid rows={rows} columns={columns} onCellMouseDown={onCellMouseDown} /\u003e;\n```\n\nSee [`CellMouseArgs`](#cellmouseargs) and [`CellMouseEvent`](#cellmouseevent)\n\n###### `onCellClick?: Maybe\u003c(args: CellMouseArgs\u003cR, SR\u003e, event: CellMouseEvent) =\u003e void\u003e`\n\nCallback triggered when a cell is clicked.\n\n```tsx\nfunction onCellClick(args: CellMouseArgs\u003cR, SR\u003e, event: CellMouseEvent) {\n  if (args.column.key === 'id') {\n    event.preventGridDefault();\n  }\n}\n\n\u003cDataGrid rows={rows} columns={columns} onCellClick={onCellClick} /\u003e;\n```\n\nThis event can be used to open cell editor on single click\n\n```tsx\nfunction onCellClick(args: CellMouseArgs\u003cR, SR\u003e, event: CellMouseEvent) {\n  if (args.column.key === 'id') {\n    args.selectCell(true);\n  }\n}\n```\n\nSee [`CellMouseArgs`](#cellmouseargs) and [`CellMouseEvent`](#cellmouseevent)\n\n###### `onCellDoubleClick?: Maybe\u003c(args: CellMouseArgs\u003cR, SR\u003e, event: CellMouseEvent) =\u003e void\u003e`\n\nCallback triggered when a cell is double-clicked. The default behavior is to open the editor if the cell is editable. Call `preventGridDefault` to prevent the default behavior.\n\n```tsx\nfunction onCellDoubleClick(args: CellMouseArgs\u003cR, SR\u003e, event: CellMouseEvent) {\n  if (args.column.key === 'id') {\n    event.preventGridDefault();\n  }\n}\n\n\u003cDataGrid rows={rows} columns={columns} onCellDoubleClick={onCellDoubleClick} /\u003e;\n```\n\nSee [`CellMouseArgs`](#cellmouseargs) and [`CellMouseEvent`](#cellmouseevent)\n\n###### `onCellContextMenu?: Maybe\u003c(args: CellMouseArgs\u003cR, SR\u003e, event: CellMouseEvent) =\u003e void\u003e`\n\nCallback triggered when a cell is right-clicked.\n\n```tsx\nfunction onCellContextMenu(args: CellMouseArgs\u003cR, SR\u003e, event: CellMouseEvent) {\n  if (args.column.key === 'id') {\n    event.preventDefault();\n    // open custom context menu\n  }\n}\n\n\u003cDataGrid rows={rows} columns={columns} onCellContextMenu={onCellContextMenu} /\u003e;\n```\n\nSee [`CellMouseArgs`](#cellmouseargs) and [`CellMouseEvent`](#cellmouseevent)\n\n###### `onCellKeyDown?: Maybe\u003c(args: CellKeyDownArgs\u003cR, SR\u003e, event: CellKeyboardEvent) =\u003e void\u003e`\n\nA function called when keydown event is triggered on a cell. This event can be used to customize cell navigation and editing behavior.\n\n**Examples**\n\n- Prevent editing on `Enter`\n\n```tsx\nfunction onCellKeyDown(args: CellKeyDownArgs\u003cR, SR\u003e, event: CellKeyboardEvent) {\n  if (args.mode === 'SELECT' \u0026\u0026 event.key === 'Enter') {\n    event.preventGridDefault();\n  }\n}\n```\n\n- Prevent navigation on `Tab`\n\n```tsx\nfunction onCellKeyDown(args: CellKeyDownArgs\u003cR, SR\u003e, event: CellKeyboardEvent) {\n  if (args.mode === 'SELECT' \u0026\u0026 event.key === 'Tab') {\n    event.preventGridDefault();\n  }\n}\n```\n\nCheck [more examples](website/routes/CellNavigation.tsx)\n\n###### `onCellCopy?: Maybe\u003c(args: CellCopyArgs\u003cNoInfer\u003cR\u003e, NoInfer\u003cSR\u003e\u003e, event: CellClipboardEvent) =\u003e void\u003e`\n\nCallback triggered when a cell's content is copied.\n\n###### `onCellPaste?: Maybe\u003c(args: CellPasteArgs\u003cNoInfer\u003cR\u003e, NoInfer\u003cSR\u003e\u003e, event: CellClipboardEvent) =\u003e void\u003e`\n\nCallback triggered when content is pasted into a cell.\n\n###### `onSelectedCellChange?: Maybe\u003c(args: CellSelectArgs\u003cR, SR\u003e) =\u003e void\u003e;`\n\nTriggered when the selected cell is changed.\n\nArguments:\n\n- `args.rowIdx`: `number` - row index\n- `args.row`: `R` - row object of the currently selected cell\n- `args.column`: `CalculatedColumn\u003cTRow, TSummaryRow\u003e` - column object of the currently selected cell\n\n###### `onScroll?: Maybe\u003c(event: React.UIEvent\u003cHTMLDivElement\u003e) =\u003e void\u003e`\n\nCallback triggered when the grid is scrolled.\n\n###### `onColumnResize?: Maybe\u003c(column: CalculatedColumn\u003cR, SR\u003e, width: number) =\u003e void\u003e`\n\nCallback triggered when column is resized.\n\n###### `onColumnsReorder?: Maybe\u003c(sourceColumnKey: string, targetColumnKey: string) =\u003e void\u003e`\n\nCallback triggered when columns are reordered.\n\n###### `enableVirtualization?: Maybe\u003cboolean\u003e`\n\n**Default:** `true`\n\nThis prop can be used to disable virtualization.\n\n###### `renderers?: Maybe\u003cRenderers\u003cR, SR\u003e\u003e`\n\nCustom renderers for cells, rows, and other components.\n\n```tsx\ninterface Renderers\u003cTRow, TSummaryRow\u003e {\n  renderCell?: Maybe\u003c(key: Key, props: CellRendererProps\u003cTRow, TSummaryRow\u003e) =\u003e ReactNode\u003e;\n  renderCheckbox?: Maybe\u003c(props: RenderCheckboxProps) =\u003e ReactNode\u003e;\n  renderRow?: Maybe\u003c(key: Key, props: RenderRowProps\u003cTRow, TSummaryRow\u003e) =\u003e ReactNode\u003e;\n  renderSortStatus?: Maybe\u003c(props: RenderSortStatusProps) =\u003e ReactNode\u003e;\n  noRowsFallback?: Maybe\u003cReactNode\u003e;\n}\n```\n\nFor example, the default `\u003cRow /\u003e` component can be wrapped via the `renderRow` prop to add contexts or tweak props\n\n```tsx\nimport { DataGrid, RenderRowProps, Row } from 'react-data-grid';\n\nfunction myRowRenderer(key: React.Key, props: RenderRowProps\u003cRow\u003e) {\n  return (\n    \u003cMyContext key={key} value={123}\u003e\n      \u003cRow {...props} /\u003e\n    \u003c/MyContext\u003e\n  );\n}\n\nfunction MyGrid() {\n  return \u003cDataGrid columns={columns} rows={rows} renderers={{ renderRow: myRowRenderer }} /\u003e;\n}\n```\n\n:warning: To prevent all rows from being unmounted on re-renders, make sure to pass a static or memoized render function to `renderRow`.\n\n###### `rowClass?: Maybe\u003c(row: R, rowIdx: number) =\u003e Maybe\u003cstring\u003e\u003e`\n\nFunction to apply custom class names to rows.\n\n```tsx\nimport { DataGrid } from 'react-data-grid';\n\nfunction MyGrid() {\n  return \u003cDataGrid columns={columns} rows={rows} rowClass={rowClass} /\u003e;\n}\n\nfunction rowClass(row: Row, rowIdx: number) {\n  return rowIdx % 2 === 0 ? 'even' : 'odd';\n}\n```\n\n###### `headerRowClass?: Maybe\u003cstring\u003e\u003e`\n\nCustom class name for the header row.\n\n###### `direction?: Maybe\u003c'ltr' | 'rtl'\u003e`\n\nThis property sets the text direction of the grid, it defaults to `'ltr'` (left-to-right). Setting `direction` to `'rtl'` has the following effects:\n\n- Columns flow from right to left\n- Frozen columns are pinned on the right\n- Column resize cursor is shown on the left edge of the column\n- Scrollbar is moved to the left\n\n###### `className?: string | undefined`\n\nCustom class name for the grid.\n\n###### `style?: CSSProperties | undefined`\n\nCustom styles for the grid.\n\n###### `'aria-label'?: string | undefined`\n\nThe label of the grid. We recommend providing a label using `aria-label` or `aria-labelledby`\n\n###### `'aria-labelledby'?: string | undefined`\n\nThe id of the element containing a label for the grid. We recommend providing a label using `aria-label` or `aria-labelledby`\n\n###### `'aria-description'?: string | undefined`\n\n###### `'aria-describedby'?: string | undefined`\n\nIf the grid has a caption or description, `aria-describedby` can be set on the grid element with a value referring to the element containing the description.\n\n###### `'data-testid'?: Maybe\u003cstring\u003e`\n\nThis prop can be used to add a testid for testing. We recommend querying the grid by by its `role` and `name`.\n\n```tsx\nfunction MyGrid() {\n  return \u003cDataGrid aria-label=\"my-grid\" columns={columns} rows={rows} /\u003e;\n}\n\ntest('grid', () =\u003e {\n  render(\u003cMyGrid /\u003e);\n  const grid = screen.getByRole('grid', { name: 'my-grid' });\n});\n```\n\n#### `\u003cTreeDataGrid /\u003e`\n\n`TreeDataGrid` is component built on top of `DataGrid` to add row grouping. This implements the [Treegrid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/). At the moment `TreeDataGrid` does not support `onFill` and `isRowSelectionDisabled` props\n\n##### TreeDataGridProps\n\n###### `groupBy?: Maybe\u003creadonly string[]\u003e`\n\n###### `rowGrouper?: Maybe\u003c(rows: readonly R[], columnKey: string) =\u003e Record\u003cstring, readonly R[]\u003e\u003e`\n\n###### `expandedGroupIds?: Maybe\u003cReadonlySet\u003cunknown\u003e\u003e`\n\n###### `onExpandedGroupIdsChange?: Maybe\u003c(expandedGroupIds: Set\u003cunknown\u003e) =\u003e void\u003e`\n\n###### `groupIdGetter?: Maybe\u003c(groupKey: string, parentId?: string) =\u003e string\u003e`\n\n#### `\u003cTextEditor /\u003e`\n\n##### Props\n\nSee [`RenderEditCellProps`](#rendereditcellprops)\n\n#### `\u003cRow /\u003e`\n\nSee [`renderers`](#renderers-mayberenderersr-sr)\n\n##### Props\n\nSee [`RenderRowProps`](#renderrowprops)\n\nThe `ref` prop is supported.\n\n#### `\u003cSortableHeaderCell /\u003e`\n\n##### Props\n\n###### `onSort: (ctrlClick: boolean) =\u003e void`\n\n###### `sortDirection: SortDirection | undefined`\n\n###### `priority: number | undefined`\n\n###### `tabIndex: number`\n\n###### `children: React.ReactNode`\n\n#### `\u003cValueFormatter /\u003e`\n\n##### Props\n\nSee [`RenderCellProps`](#rendercellprops)\n\n#### `\u003cSelectCellFormatter /\u003e`\n\n##### Props\n\n###### `value: boolean`\n\n###### `tabIndex: number`\n\n###### `disabled?: boolean | undefined`\n\n###### `onChange: (value: boolean, isShiftClick: boolean) =\u003e void`\n\n###### `onClick?: MouseEventHandler\u003cT\u003e | undefined`\n\n###### `'aria-label'?: string | undefined`\n\n###### `'aria-labelledby'?: string | undefined`\n\n#### `\u003cToggleGroupFormatter /\u003e`\n\n##### Props\n\nSee [`RenderGroupCellProps`](#rendergroupcellprops)\n\n### Hooks\n\n#### `useHeaderRowSelection\u003cR\u003e(): { isIndeterminate, isRowSelected, onRowSelectionChange }`\n\n#### `useRowSelection\u003cR\u003e(): { isRowSelectionDisabled, isRowSelected, onRowSelectionChange }`\n\n### Other\n\n#### `SelectColumn: Column\u003cany, any\u003e`\n\n#### `SELECT_COLUMN_KEY = 'rdg-select-column'`\n\n### Types\n\n#### `Column`\n\n##### `name: string | ReactElement`\n\nThe name of the column. Displayed in the header cell by default.\n\n##### `key: string`\n\nA unique key to distinguish each column\n\n##### `width?: Maybe\u003cnumber | string\u003e`\n\n**Default** `auto`\n\nWidth can be any valid css grid column value. If not specified, it will be determined automatically based on grid width and specified widths of other columns.\n\n```tsx\nwidth: 80, // pixels\nwidth: '25%',\nwidth: 'max-content',\nwidth: 'minmax(100px, max-content)',\n```\n\n`max-content` can be used to expand the column to show all the content. Note that the grid is only able to calculate column width for visible rows.\n\n##### `minWidth?: Maybe\u003cnumber\u003e`\n\n**Default**: `50` pixels\n\nMinimum column width in pixels.\n\n##### `maxWidth?: Maybe\u003cnumber\u003e`\n\nMaximum column width in pixels.\n\n##### `cellClass?: Maybe\u003cstring | ((row: TRow) =\u003e Maybe\u003cstring\u003e)\u003e`\n\nClass name(s) for the cell\n\n##### `headerCellClass?: Maybe\u003cstring\u003e`\n\nClass name(s) for the header cell.\n\n##### `summaryCellClass?: Maybe\u003cstring | ((row: TSummaryRow) =\u003e Maybe\u003cstring\u003e)\u003e`\n\nClass name(s) for the summary cell.\n\n##### `renderCell?: Maybe\u003c(props: RenderCellProps\u003cTRow, TSummaryRow\u003e) =\u003e ReactNode\u003e`\n\nRender function to render the content of cells.\n\n##### `renderHeaderCell?: Maybe\u003c(props: RenderHeaderCellProps\u003cTRow, TSummaryRow\u003e) =\u003e ReactNode\u003e`\n\nRender function to render the content of the header cell.\n\n##### `renderSummaryCell?: Maybe\u003c(props: RenderSummaryCellProps\u003cTSummaryRow, TRow\u003e) =\u003e ReactNode\u003e`\n\nRender function to render the content of summary cells\n\n##### `renderEditCell?: Maybe\u003c(props: RenderEditCellProps\u003cTRow, TSummaryRow\u003e) =\u003e ReactNode\u003e`\n\nRender function to render the content of edit cells. When set, the column is automatically set to be editable\n\n##### `editable?: Maybe\u003cboolean | ((row: TRow) =\u003e boolean)\u003e`\n\nEnables cell editing. If set and no editor property specified, then a text input will be used as the cell editor.\n\n##### `colSpan?: Maybe\u003c(args: ColSpanArgs\u003cTRow, TSummaryRow\u003e) =\u003e Maybe\u003cnumber\u003e\u003e`\n\n##### `frozen?: Maybe\u003cboolean\u003e`\n\n**Default**: `false`\n\nDetermines whether column is frozen. Frozen columns are pinned on the left. At the moment we do not support pinning columns on the right.\n\n##### `resizable?: Maybe\u003cboolean\u003e`\n\n**Default**: `false`\n\nEnable resizing of the column\n\n##### `sortable?: Maybe\u003cboolean\u003e`\n\n**Default**: `false`\n\nEnable sorting of the column\n\n##### `draggable?: Maybe\u003cboolean\u003e`\n\n**Default**: `false`\n\nEnable dragging of the column\n\n##### `sortDescendingFirst?: Maybe\u003cboolean\u003e`\n\n**Default**: `false`\n\nSets the column sort order to be descending instead of ascending the first time the column is sorted\n\n##### `editorOptions`\n\nOptions for cell editing.\n\n###### `displayCellContent?: Maybe\u003cboolean\u003e`\n\n**Default**: `false`\n\nRender the cell content in addition to the edit cell. Enable this option when the editor is rendered outside the grid, like a modal for example.\n\n###### `commitOnOutsideClick?: Maybe\u003cboolean\u003e`\n\n**Default**: `true`\n\nCommit changes when clicking outside the cell.\n\n###### `closeOnExternalRowChange?: Maybe\u003cboolean\u003e`\n\n**Default**: `true`\n\nClose the editor when the row changes externally.\n\n#### `CellMouseArgs`\n\n##### `rowIdx: number`\n\nRow index of the currently selected cell\n\n##### `row: TRow`\n\nrow object of the currently selected cell\n\n##### `column: CalculatedColumn\u003cTRow, TSummaryRow\u003e`\n\ncolumn object of the currently selected cell\n\n##### `selectCell: (enableEditor?: boolean) =\u003e void`\n\nfunction to manually select the cell and optionally pass `true` to start editing\n\n#### `CellMouseEvent`\n\nExtends `React.MouseEvent\u003cHTMLDivElement\u003e`\n\n##### `event.preventGridDefault: () =\u003e void`\n\n##### `event.isGridDefaultPrevented: boolean`\n\n#### `DataGridHandle`\n\n#### `RenderEditCellProps`\n\n#### `RenderRowProps`\n\n#### `RenderCellProps`\n\n#### `RenderGroupCellProps`\n\n### Generics\n\n- `R`, `TRow`: Row type\n- `SR`, `TSummaryRow`: Summary row type\n- `K`: Row key type\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FComcast%2Freact-data-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FComcast%2Freact-data-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FComcast%2Freact-data-grid/lists"}