When we highlight an entire row using line numbers, copy/paste does not work. It works fine with column selection.

What is actually happening?

When you set lockRows={true}, the context menu is still available.

What is expected?

Setting lockRows={true} should force disableContextMenu={true}.

I am currently working on a significant performance improvement by leveraging memoization a lot more than the current version does. Each row and each cell should render a lot less, and a great performance boost is to be expected as a result.

I'm also leveraging the isScrolling feature of react-window to render a lighter version of each row when scrolling for a smoother experience.

Resizing should also feel much smoother as a result of both rendering optimization and CSS improvements.

This is a complete re-write of the core, but the API should not change so no major version bump is to be expected 👍

If I put the DataSheetGrid component into my Form element, I have a Form in a Form and the "submit button of the new line bloc" is triggering my Form.

Amazing job guys for building this product, overall it was super smooth and the performance is very impressive.

I'm personally curious about the feature roadmap for this product, specifically for native spreadsheet interactions available on Google Sheets/Excel like the following:

• Ctrl/Command + Click for multiple disjointed cell selection
• Select + Drag to copy values across multiple cells
• Drag to resize columns and rows

Thank you very much, I'm planning to use react-datasheet-grid and missing these features, it's holding me back from committing to it, otherwise, I love the development experience of it.

API

A resazableColumn: boolean prop

Behavior

• Column start off as they do today, respecting their given width, maxWidth, minWidth
• Once resized, a column becomes of fixed-width (width: '0 0 <width>px', and no min and max-width)

Questions

• How should other columns react when a column is being resized? Should they adjust in real-time or become fixed temporarily?
• The parent should handle the width change, but how would the API look like? onColumnWidthChange prop?

like google spreadsheet please
https://docs.google.com/spreadsheets/d/1up5CSyKGFx3K1nX4kTfeNQUfb1FRpZQBcenJ6aIBvkw/edit#gid=0

Cannot paste clipboard data with more columns than DataSheetGrid without crashing. Is there any way to intercept this and check if elements will make it into the table, to make the component more robust?

Test on Codesandbox or Demo website.

• Tabbing from end of row should go to next row
• Shift+Tabbing from start of row should go to previous row

Hi, I'd like to propose Programmatic Grid Control as a new feature that might be useful for many typical use cases and is (hopefully) easy to implement:

Motivation

In many applications, a data grid is used in conjunction with other UI elements that represent the same data in a different way, e.g. charts that visualize the grid data. It would be great if these UI components could interact programmatically with the data grid, for example:

• a click on an element in a scatter plot will set the focus to the corresponding cell in the grid
• a click on a bar in a bar chart will select the corresponding row or column in the data grid
• in the example below, each 'ring segment' represents a table cell. A click on a ring segment would set the focus to this table cell

In order to allow such interaction between UI components, the data grid must expose some internal functions for programmatic access from outside.

API

To keep it simple, this feature could be implemented by exposing already existing functions via a forwardRef and useImperativeHandle like this:

DataSheetGrid.tsx:

// ...

export const DataSheetGrid = forwardRef((props, ref) => {

//...

  useImperativeHandle(
    ref,
    () => ({
      activeCell,
      setActiveCell,
      selectionCell,
      setSelectionCell
    })
  );

// ...

}

Caller:

// create a ref to the data grid
const gridRef = useRef();

<DataSheetGrid 
  ref={gridRef} 
  data={data}
  onChange={setData}
  columns={columns} />

// ...

// use the ref to access the grid from somewhere else in the code
<button
  onClick = {()=> gridRef.setActiveCell({x:0, y: 0})}>
  Highlight the first cell
</button>

Hi,
I implemented react select to a column exactly like on the doc. I want options to be dynamic. When I add a measure unit, the unit should be available in the select column. I am adding the unit to the variable where I store the options of the select column but it doesn't show the unit.

Hello. 👋🏻 Is there any property for column sorting? If isn't, will be added in future updates? Thanks.

Hello,

is ther a function to pass to the DataGrid, when i click into a cell, to get the information from the cell?

With best regards.

Hi, thanks for the great work!

I was trying to use your grid in an application in which column definitions can change at runtime. Unfortunately, modifying columns crashes the grid. I could reproduce this problem with a minimal example here:

https://codesandbox.io/s/green-monad-7svl0?file=/src/App.tsx

Luckily, there is a workaround (contained in the example above), but it's not very elegant.

Is this a bug or is react-datasheet-grid designed to only work with a static set of columns?

By default it's a type="submit" instead of button type="button"

Hi,
I have integrated react-datasheet-grid with my system successfully and it works great actually. However, upon clicking on the + Add # rows (bottom bar) of the component it calls event handlers that it does not supposed to call and messes my UI (i.e. triggers an alert in a validation method inside an on submit event handler! also shrinks/closes/collapses bootstrap accordion component) which is very weird.

My guess is that this + Add # rows button calls an event handler which I could not figure it out nor could not find it in the documentation to be able to stop this mess!

So, Kindly help me
PS: I think that as a hacky solution to my case I need to add e.stopPropagation() on that button event handler however I could not figure out how to access that event handler!

What problem does this feature solve?

Allow the user to add a column with more actions.

What does the proposed API look like?

Add new params to the Render function

I want to start by saying I love your library and it will be very big very soon!

On "Select Column Example" there is a bug .

Step:

• Go to final completed example for "Select Column Example" (bottom of page)
• https://react-datasheet-grid.netlify.app/docs/examples/implementing-select#using-with-multiple-columns
• Enter in A Value in Select Column then press tab to accept value
• ERROR VIDEO - https://www.loom.com/share/dc94c90ce38d4dd7be0150a001bf797b
• When you press tab it skips one column right then when column down
• IT SHOULD ONLY SKIP ONE COLUMN RIGHT

Thanks,

Any help with this would be greatly appreciated

Hi,

I want to report a small issue that probably has to do with the way that excel is putting the data into the clipboard

Cheers,

Hey, I was wondering, if there are any plans to add dragging of Rows?

Add an input in the "add" button

Hello,

I wanted to create an accordion within react-datasheet-grid. Therefore when the user clicks on a button it would open an area below that I could just insert subcomponent information there.

eg. you have you list of items => then in each you have details about that item when you click the accordion drop down

Is this possible?

Below is an example of something it might be like but it can just be a regular accordion as well with information in it but it would span the length of the table.

• Corner is still blue when selection is disabled
• Corner should not be shown when selection cannot be expanded (all cells below are disabled)

Hi,

I really like this library and I would love to contribute to it. Currently I have some use cases for integer columns, validations and some other features. If you are OK, I'm gonna create some PR soon.

Cheers

Hello again, with my new idea. :)

Here is a new column type suggestion for selecting item. I changed <input> tag to <select> in the screenshot.

But I'm confused about how to integrate this column type to this project. I'm new in React & Typescript. So it may take a time to develop this. But if there will be update, I'll post it in here. 👍🏻

Hello,

Love this repo and how simple it is. Is there a license for this repo? Would love to use this in one of my projects.

Edit: Saw you guys are a french company. Mon français est terrible, mais j'espere que vous avez une bonne journée! (J'ai fait des classes pour français quand j'est allé à l'école. Cela fait longtemps que j'utilise français!)

Edit 2: Saw the MIT license at the very bottom. Thank you!

Best,

Kenny

Expected behavior

1. The user makes any selection
2. A square appears on the bottom right of the selection
3. The user can only drag down that square (not sideways, not up)
4. The last row of the selection is copied (even if the selection is a few rows high) and pasted on all dragged rows

API

The only API change would be a disableDrag

Sometimes it happens in the document as well.
(look at height of Boolean's border)

Hi.
If we make refresh to browser page (F5), scrollbar shown for small period of time.

Example:

Context menu has a typo: "Insert menu bellow". Bellow has an extra "L".

I'm very interested in your datasheet.
but in my project. I need to replace a specific cell (row:2, column2) with a custom component.
Because each row has a different type of data to display.
Can I accomplish this?

When I use render() function to styling, I cannot change the cell. Here is the snippet of columns:

const columns = [
    ...
    textColumn({ 
      title: 'Kulak No', 
      width: 1, 
      minWidth: 200, 
      key: 'identityNumber', 
      columnName: 'identityNumber', 
      render: d=> renderStyle(d.rowData['identityNumber']) })
    ...
  ];

And here is renderStyle():

const renderStyle = (value) => {
    if (updates.length>0) {
      return (
        <input 
          className='dsg-input' 
          defaultValue={value} 
          style={{'pointerEvents': 'none', 'backgroundColor': 'rgba(132,187,114,0.6)'}}/>
      );
    } else {
      return (
        <input 
          className='dsg-input' 
          defaultValue={value}
          style={{'pointerEvents': 'none', 'backgroundColor': ''}}/>
      );
    }
  } 

updates is a object which is store in Redux.

It might be good if there will be onChange event, like this:

textColumn({ 
      title: 'Kulak No', 
      width: 1, 
      minWidth: 200, 
      key: 'identityNumber', 
      columnName: 'identityNumber', 
      render: d=>{
        d.onChange(d.rowData['identityNumber']);
        renderStyle(d.rowData['identityNumber']);}})

Hi!
Currently the ability to click and drag to copy multiple rows exists. I was wondering if it would be a possibility to add the feature of holding shift to select all rows from the first clicked to the last.

This would also go along with holding ctrl, to select multiple rows not next to each other.

This would make data easier to copy and paste to and from other places.

i have this error when a try to use the DataSheet in a grid or a flex container, but the error does not occur in a normal HTML data flow, sorry for my english

visual example:
https://www.loom.com/share/ff3f7af716a64feab36bddff059456ac

Hello.
I'm trying to render cell with React-Tooltip package. But when I try to enter input, I need to click for three times. I thought pointer events may change this situation but makes no difference. Here is the snippet from my code:

const columns = [
    title: 'Kulak No', width: 1, minWidth: 200, key: 'identityNumber',
    render: ({rowData, rowIndex, columnIndex, setRowData, focus}) => renderStyle(rowData, rowIndex, columnIndex, 
    setRowData, focus) }),

And what I return in renderStyle is:

return (
            <>
              <input data-for={rowIndex+'-'+columnIndex} data-tip className={'dsg-input ' + className} style={{pointerEvents: focus ? 'auto' : 'none'}} value={rowData[column]} onChange={(e) => setRowData({...rowData, [column]: e.target.value})}/>
              <ReactTooltip id={rowIndex+'-'+columnIndex} place="right" type="warning" effect="solid" backgroundColor='rgb(200, 61, 255);'>
                <span><b>Please avoid duplication!</b></span>
              </ReactTooltip>
            </>
          )

How can I edit cell on render function if cell is selected?

We cant to change focus from table to prevous or next element (button or other focusable html element) by tab, shift+tab keys.