{"id":13404185,"url":"https://github.com/nadbm/react-datasheet","last_synced_at":"2025-05-13T18:14:49.597Z","repository":{"id":37788767,"uuid":"69185236","full_name":"nadbm/react-datasheet","owner":"nadbm","description":"Excel-like data grid (table) component for React","archived":false,"fork":false,"pushed_at":"2023-03-01T10:23:05.000Z","size":13020,"stargazers_count":5432,"open_issues_count":128,"forks_count":453,"subscribers_count":47,"default_branch":"master","last_synced_at":"2025-05-07T16:02:18.242Z","etag":null,"topics":["component","grid","javascript","react","sheet","spreadsheet","table","tableau"],"latest_commit_sha":null,"homepage":"https://nadbm.github.io/react-datasheet/","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/nadbm.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}},"created_at":"2016-09-25T19:18:17.000Z","updated_at":"2025-05-03T07:43:50.000Z","dependencies_parsed_at":"2023-02-01T08:46:15.929Z","dependency_job_id":"da0eb046-0e78-48f1-935b-8dba9dc82907","html_url":"https://github.com/nadbm/react-datasheet","commit_stats":{"total_commits":213,"total_committers":49,"mean_commits":4.346938775510204,"dds":0.6338028169014085,"last_synced_commit":"13b5c35f28b4bab2547402b2c406986ef1913245"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nadbm%2Freact-datasheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nadbm%2Freact-datasheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nadbm%2Freact-datasheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nadbm%2Freact-datasheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nadbm","download_url":"https://codeload.github.com/nadbm/react-datasheet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254000885,"owners_count":21997443,"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":["component","grid","javascript","react","sheet","spreadsheet","table","tableau"],"created_at":"2024-07-30T19:01:40.231Z","updated_at":"2025-05-13T18:14:49.543Z","avatar_url":"https://github.com/nadbm.png","language":"JavaScript","readme":"## react-datasheet is no longer under active development. New maintainers are wanted. Please contact me if you wish to maintain this repo. \n\n---\n\n\n[![Build Status](https://travis-ci.org/nadbm/react-datasheet.svg?branch=master)](https://travis-ci.org/nadbm/react-datasheet)\n[![Coverage Status](https://coveralls.io/repos/github/nadbm/react-datasheet/badge.svg)](https://coveralls.io/github/nadbm/react-datasheet)\n[![Issue Count](https://codeclimate.com/github/nadbm/react-datasheet/badges/issue_count.svg)](https://codeclimate.com/github/nadbm/react-datasheet)\n[![npm version](https://badge.fury.io/js/react-datasheet.svg)](https://badge.fury.io/js/react-datasheet)\n\n# React-Datasheet\n\nA simple react component to create a spreadsheet.\n\nDemo here: https://nadbm.github.io/react-datasheet/\n\nExamples are located in\nhttps://github.com/nadbm/react-datasheet/tree/master/docs/src/examples\n\nCurrent features:\n\n- Select cells, cut, copy and paste cells\n- Navigation using keyboard keys\n- Deletion using keyboard keys\n- Callbacks for onCellsChanged, valueRenderer(visible data)\n- dataRenderer(underlying data in the input, takes the value by default)\n- Supply your own editors and view controls with custom renderers\n- Extensive control over generated markup via custom renderers\n\nUsing Typescript?\n[View Usage](https://github.com/nadbm/react-datasheet/tree/master/USAGE_TYPESCRIPT.md)\n\n## Installation\n\nInstall from npm:\n\n```bash\n$ npm install react-datasheet --save\n```\n\nImport in your project:\n\n```javascript\nimport ReactDataSheet from 'react-datasheet';\n// Be sure to include styles at some point, probably during your bootstrapping\nimport 'react-datasheet/lib/react-datasheet.css';\n```\n\n## Usage\n\nReact-Datasheet generates a table with the cells. Double-clicking or typing\nedits the value and if changed, initiates an `onCellsChanged` callback. Pasting\ntabular data or deleting a range of cells also calls `onCellsChanged`.\n\nThe data provided should be an array of rows, and each row should include the\ncells.\n\n### Basic Usage\n\n```jsx\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n grid: [\n [{ value: 1 }, { value: 3 }],\n [{ value: 2 }, { value: 4 }],\n ],\n };\n }\n render() {\n return (\n \u003cReactDataSheet\n data={this.state.grid}\n valueRenderer={cell =\u003e cell.value}\n onCellsChanged={changes =\u003e {\n const grid = this.state.grid.map(row =\u003e [...row]);\n changes.forEach(({ cell, row, col, value }) =\u003e {\n grid[row][col] = { ...grid[row][col], value };\n });\n this.setState({ grid });\n }}\n /\u003e\n );\n }\n}\n```\n\n### Cells with underlying data\n\nThere are two values that each cell shows. The first is via `valueRenderer` and\nthe second is via `dataRenderer`. When a cell is in _edit mode_, it will show\nthe value returned from `dataRenderer`. It needs to return a string as this\nvalue is set in an input field. Each of these callbacks are passed the cell\nvalue as well as the cell's coordinates in the spreadsheet. This allows you to\napply formatting logic at rendering time, such as _all cells in the third column\nshould be formatted as dates_.\n\n```jsx\nconst grid = [\n [{value: 5, expr: '1 + 4'}, {value: 6, expr: '6'}, {value: new Date('2008-04-10')}],\n [{value: 5, expr: '1 + 4'}, {value: 5, expr: '1 + 4'}, {value: new Date('2004-05-28')}]\n]\nconst onCellsChanged = (changes) =\u003e changes.forEach(({cell, row, col, value}) =\u003e console.log(\"New expression :\" + value))\n\u003cReactDataSheet\n data={grid}\n valueRenderer={(cell, i, j) =\u003e j == 2 ? cell.value.toDateString() : cell.value}\n dataRenderer={(cell, i, j) =\u003e j == 2 ? cell.value.toISOString() : cell.expr}\n onCellsChanged={onCellsChanged}\n/\u003e\n```\n\n### Cells with underlying component\n\n```jsx\nconst grid = [\n [{\n value: 5,\n component: (\n \u003cbutton onClick={() =\u003e console.log(\"clicked\")}\u003e\n Rendered\n \u003c/button\u003e\n )\n }]\n]\n\u003cReactDataSheet\n data={grid}\n valueRenderer={(cell) =\u003e cell.value}\n/\u003e\n```\n\nThis renders a single cell with the value 5. Once in edit mode, the button will\nappear.\n\n### Cells with extra attributes\n\n```jsx\nconst grid = [\n [{value: 1, hint: 'Valid'}, {value: 3, hint: 'Not valid'}],\n [{value: 2}, {value: 4}]\n]\n\u003cReactDataSheet\n data={grid}\n valueRenderer={(cell) =\u003e cell.value}\n attributesRenderer={(cell) =\u003e (cell.hint ? { 'data-hint': cell.hint } : {})}\n ...\n/\u003e\n```\n\nThis render 2 rows, each one with two cells, the cells in the first row will\nhave an attribute data-hint and the other 2 will not.\n\n### Custom renderers\n\nReact-Datasheet allows you replace the renderers both for the overall structure\n(rows, cells, the sheet itself) as well as editors and viewers for individual\ncells. This allows you to radically refashion the sheet to suit your\nrequirements.\n\nFor example, this shows how to add separate headers and a checkbox at the start\nof each row to control row \"selected\" state. It also specifies a custom view\nrenderer and a custom editor for the first column of each row:\n\n```jsx\nconst columns = getColumnsFromSomewhere()\nconst isSelected = yourSelectionFunction\nconst selectHandler = yourCallbackFunction\n\n\u003cReactDataSheet\n data={grid}\n valueRenderer={(cell) =\u003e cell.value}\n sheetRenderer={props =\u003e (\n \u003ctable className={props.className + ' my-awesome-extra-class'}\u003e\n \u003cthead\u003e\n \u003ctr\u003e\n \u003cth className='action-cell' /\u003e\n {columns.map(col =\u003e (\u003cth\u003e{col.name}\u003c/th\u003e))}\n \u003c/tr\u003e\n \u003c/thead\u003e\n \u003ctbody\u003e\n {props.children}\n \u003c/tbody\u003e\n \u003c/table\u003e\n )}\n rowRenderer={props =\u003e (\n \u003ctr\u003e\n \u003ctd className='action-cell'\u003e\n \u003cinput\n type='checkbox'\n checked={isSelected(props.row)}\n onChange={selectHandler}\n /\u003e\n \u003c/td\u003e\n {props.children}\n \u003c/tr\u003e\n )}\n valueViewer={MyViewComponent}\n dataEditor={props =\u003e (\n props.col === 0 ? \u003cMyDatePicker {...props} /\u003e : \u003cDataEditor {...props}/\u003e\n )}\n ...\n/\u003e\n```\n\n_Note:_ For brevity, in this example the custom renderers are all defined as\narrow functions inside of render, but using a\n[bound function](https://reactjs.org/docs/faq-functions.html) in the parent\ncomponent or a separate custom component will let you avoid a lot of needless\nre-renders.\n\n## Options\n\n| Option | Type | Description |\n| :-------------- | :----------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| data | Array | Array of rows and each row should contain the cell objects to display |\n| valueRenderer | func | Method to render the value of the cell `function(cell, i, j)`. This is visible by default |\n| dataRenderer | func | Method to render the underlying value of the cell `function(cell, i, j)`. This data is visible once in edit mode. |\n| overflow | 'wrap'\\|'nowrap'\\|'clip' | Grid default for how to render overflow text in cells |\n| onCellsChanged | func | onCellsChanged handler: `function(arrayOfChanges[, arrayOfAdditions]) {}`, where changes is an **array** of objects of the shape `{cell, row, col, value}`. See below for more details. |\n| onContextMenu | func | Context menu handler : `function(event, cell, i, j)` |\n| parsePaste | func | `function (string) {}` If set, the function will be called with the raw clipboard data. It should return an array of arrays of strings. This is useful for when the clipboard may have data with irregular field or line delimiters. If not set, rows will be split with line breaks and cells with tabs. |\n| isCellNavigable | func | `function (cell, row, col) {return true}` If set, the function is used to determine whether navigation to the indicated cell should be allowed or not. If not then using cursor or tab navigation will skip over not allowed cells until it finds the next allowed cell. |\n| handleCopy | func | `function ({ event, dataRenderer, valueRenderer, data, start, end, range })` If set, this function is called whenever the user copies cells. The return string of this function is stored on the clipboard. |\n\n### Advanced options\n\nThe following are optional functions or React Component that can completely\noverride the native renderers of react datasheet. To know which props are passed\ndown, see\n[custom renderers](https://github.com/nadbm/react-datasheet#custom-renderers-1)\n\n| Option | Type | Description |\n| :------------ | :----: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| sheetRenderer | func | Optional function or React Component to render the main sheet element. The default renders a `table` element. |\n| rowRenderer | func | Optional function or React Component to render each row element. The default renders a `tr` element. |\n| cellRenderer | func | Optional function or React Component to render each cell element. The default renders a `td` element. |\n| valueViewer | func | Optional function or React Component to customize the way the value for each cell in the sheet is displayed. Affects every cell in the sheet. See [cell options](https://github.com/nadbm/react-datasheet#cell-options) to override individual cells. |\n| dataEditor | func | Optional function or React Component to render a custom editor. Affects every cell in the sheet. See [cell options](https://github.com/nadbm/react-datasheet#cell-options) to override individual cells. |\n| selected | object | Optional. Whether the selection is controlled or uncontrolled. Must be an object of this format: `{ start: { i: number, j; number }, end: { i: number, j: number } }`, or `null` for no selection. |\n| onSelect | func | Optional. `function ({ start, end }) {}` Triggered on every selection change. `start` and `end` have the same format as the `selected` prop. |\n\n## `onCellsChanged(arrayOfChanges[, arrayOfAdditions])` handler\n\nReact-DataSheet will call this callback whenever data in the grid changes:\n\n- When the user enters a new value in a cell\n- When the user hits the delete key with one or more selected cells\n- When the user pastes tabular data into the table\n\nThe argument to the callback usually will be one **array** of objects with these\nproperties:\n\n| Property | Type | Description |\n| :------- | :----: | :----------------------------------------------------------------------------------------------- |\n| cell | object | the original cell object you provided in the `data` property. This may be `null` (see below) |\n| row | number | row index of changed cell |\n| col | number | column index of changed cell |\n| value | any | The new cell value. This is usually a string, but a custom editor may provide any type of value. |\n\nIf the change is the result of a user edit, the array will contain a single\nchange object. If the user pastes data or deletes a range of cells, the array\nwill contain an element for each affected cell.\n\n**Additions:** If the user pastes data that extends beyond the bounds of the\ngrid (for example, pasting two-row-high data on the last line), there will be a\nsecond argument to the handler containing an array of objects that represent the\nout-of-bounds data. These object will have the same properties, except:\n\n- There is no `cell` property\n- either `row` or `col`, or both, will be outside the bounds of your original\n grid. They will correspond to the indices the new data would occupy if you\n expanded your grid to hold them.\n\nYou can choose to ignore the additions, or you can expand your model to\naccommodate the new data.\n\n### Deprecated handlers\n\nPreviously React-DataSheet supported two change handlers. These are still\nsupported for backwards compatibility, but will be removed at some point in the\nfuture.\n\n| Option | Type | Description |\n| :------- | :--: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| onChange | func | onChange handler: `function(cell, i, j, newValue) {}` |\n| onPaste | func | onPaste handler: `function(array) {}` If set, the function will be called with an array of rows. Each row has an array of objects containing the cell and raw pasted value. If the pasted value cannot be matched with a cell, the cell value will be undefined. |\n\n## Cell Options\n\nThe cell object is what gets passed back to the onChange callback. They can\ncontain the following options as well\n\n| Option | Type | Default | Description |\n| :------------- | :------------------------ | :-------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| readOnly | Bool | false | Cell will never go in edit mode |\n| key | String | undefined | By default, each cell is given the key of col number and row number. This would override that key |\n| className | String | undefined | Additional class names for cells. |\n| component | ReactElement | undefined | Insert a react element or JSX to this field. This will render on edit mode |\n| forceComponent | bool | false | Renders what's in component at all times, even when not in edit mode |\n| disableEvents | bool | false | Makes cell unselectable and read only |\n| colSpan | number | 1 | The colSpan of the cell's td element |\n| rowSpan | number | 1 | The rowSpan of the cell's td element |\n| width | number or String | undefined | Sets the cell's td width using a style attribute. Number is interpreted as pixels, strings are used as-is. Note: This will only work if the table does not have a set width. |\n| overflow | 'wrap'\\|'nowrap'\\| 'clip' | undefined | How to render overflow text. Overrides grid-level `overflow` option. |\n| valueViewer | func | undefined | Optional function or React Component to customize the way the value for this cell is displayed. Overrides grid-level `valueViewer` option. |\n| dataEditor | func | undefined | Optional function or React Component to render a custom editor. Overrides grid-level `dataEditor` option. |\n\n## Custom Renderers\n\nEach of the following custom renderers should be either a React Component or a\nfunction that takes a `props` argument and returns a react element (a.k.a\nstateless functional component). React-DataSheet will supply certain properties\nto each renderer.\n\nIn some cases React-DataSheet will include event handlers as properties to your\ncustom renderer. You must hook up these handlers to your component or aspects of\nReact-DataSheet's built-in behavior will cease to work.\n\nExcept for `valueViewer` and `dataEditor`, each custom renderer will receive\nreact's regular `props.children`. Be sure to render `{props.children}` in your\ncustom renderer.\n\n### Sheet Renderer\n\nThe `sheetRenderer` is responsible for laying out the sheet's main parent\ncomponent. By default, React-DataSheet uses a `table` element. React-DataSheet\nwill supply these properties:\n\n| Option | Type | Description |\n| :-------- | :----------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| data | Array | The same `data` array as from main `ReactDataSheet` component |\n| className | String | Classes to apply to your top-level element. You can add to these, but your should not overwrite or omit them unless you want to implement your own CSS also. |\n| children | Array or component | The regular react `props.children`. You must render `{props.children}` within your custom renderer or you won't see your rows and cells. |\n\n### Row Renderer\n\nThe `rowRenderer` lays out each row in the sheet. By default, React-DataSheet\nuses a `tr` element. React-DataSheet will supply these properties:\n\n| Option | Type | Description |\n| :------- | :----------------- | :------------------------------------------------------------------------------------------------------------------------------ |\n| row | number | The current row index |\n| selected | Bool | `true` in case the current row is selected |\n| cells | Array | The cells in the current row |\n| children | Array or component | The regular react `props.children`. You must render `{props.children}` within your custom renderer or you won't see your cells. |\n\n### Cell Renderer\n\nThe `cellRenderer` creates the container for each cell in the sheet. The default\nrenders a `td` element. React-DataSheet will supply these properties:\n\n| Option | Type | Description |\n| :----------------- | :----------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| row | number | The current row index |\n| col | number | The current column index |\n| cell | Object | The cell's raw data structure |\n| className | String | Classes to apply to your cell element. You can add to these, but your should not overwrite or omit them unless you want to implement your own CSS also. |\n| style | Object | Generated styles that you should apply to your cell element. This may be null or undefined. |\n| selected | Bool | Is the cell currently selected |\n| editing | Bool | Is the cell currently being edited |\n| updated | Bool | Was the cell recently updated |\n| attributesRenderer | func | As for the main `ReactDataSheet` component |\n| onMouseDown | func | Event handler important for cell selection behavior |\n| onMouseOver | func | Event handler important for cell selection behavior |\n| onDoubleClick | func | Event handler important for editing |\n| onContextMenu | func | Event handler to launch default content-menu handling. You can safely ignore this handler if you want to provide your own content menu handling. |\n| children | Array or component | The regular react `props.children`. You must render `{props.children}` within your custom renderer or you won't your cell's data. |\n\n### Value Viewer\n\nThe `valueViewer` displays your cell's data with a custom component when in view\nmode. For example, you might show a \"three star rating\" component instead the\nnumber 3. You can specify a `valueViewer` for the entire sheet and/or for an\nindividual cell.\n\nReact-DataSheet will supply these properties:\n\n| Option | Type | Description |\n| :----- | :----- | :----------------------------------------- |\n| value | node | The result of the `valueRenderer` function |\n| row | number | The current row index |\n| col | number | The current column index |\n| cell | Object | The cell's raw data structure |\n\n### Data Editor\n\nThe `dataEditor` displays your cell's data when in edit mode. You can can use\nany component you want, as long as you hook up the event handlers that\nconstitute the contract between React-DataSheet and your editor. You can specify\na `dataEditor` for the entire sheet and/or for an individual cell.\n\n| Option | Type | Description |\n| :-------- | :------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| value | String or node | The result of the `dataRenderer` (or `valueRenderer` if none) |\n| row | number | The current row index |\n| col | number | The current column index |\n| cell | Object | The cell's raw data structure |\n| onChange | func | `function (string) {}` callback for when the user changes the value during editing (for example, each time they type a character into an `input`). `onChange` does not indicate the _final_ edited value. It works just like a [controlled component](https://reactjs.org/docs/forms.html#controlled-components) in a form. |\n| onKeyDown | func | `function (event) {}` An event handler that you can call to use default React-DataSheet keyboard handling to signal reverting an ongoing edit (Escape key) or completing an edit (Enter or Tab). For most editors based on an `input` element this will probably work. However, if this keyboard handling is unsuitable for your editor you can trigger these changes explicitly using the `onCommit` and `onRevert` callbacks. |\n| onCommit | func | `function (newValue, [event]) {}` A callback to indicate that editing is over, here is the final value. If you pass a `KeyboardEvent` as the second argument, React-DataSheet will perform default navigation for you (for example, going down to the next row if you hit the enter key). You actually don't need to use `onCommit` if the default keyboard handling is good enough for you. |\n| onRevert | func | `function () {}` A no-args callback that you can use to indicate that you want to cancel ongoing edits. As with `onCommit`, you don't need to worry about this if the default keyboard handling works for your editor. |\n","funding_links":[],"categories":["JavaScript","javascript","react"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnadbm%2Freact-datasheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnadbm%2Freact-datasheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnadbm%2Freact-datasheet/lists"}