prevent selecting non-editable cells

rburgstaller commented 4 years ago

Which version of React JS are you using?

☣️ Not officially supported, expect warnings and errors ☣️

[x] v16.x.x

Which browser are you using?

✅ Officially supported ✅

[ ] IE 9 / IE 10 / IE 11
[ ] Edge
[x] Chrome

I'm submitting a ...

[ ] 🐛 Bug Report
[x] 💡 Feature Request

Issue Details

What the current behavior is

currently all cells can be selected / focused

What the desired behavior is

I would like to disable selecting specific cells. At the very minimum I would like the tab navigation to only include editable cells.

Lets assume that I have a table with 3 rows and 3 columns, the first column should not be editable / locked. Therefore you start in the 2nd column of the 1st row. Now you press tab, you get to the 3rd column, now you press tab again and you should be in the 2nd row/2nd column (skipping over the 1st column of the 2nd row).

(If Feature) The motivation / use case for the feature

I would like to replicate the behaviour of locked cells in excel.

webestet commented 4 years ago

Yes. +1. I want to have this functionality too. It's problem now for my app.

This issue needs to comments from author of library. @nstepien

sophielevens commented 4 years ago

I am also keen to see this functionality! Any chance it might be looked at @nstepien ?

SteveDowsett commented 4 years ago

another +1 here, this is causing me no end of problems. if a cell is selected regardless of whether its editable or not, it makes it very hard for the user to know which fields are actually editable and that they can just start typing in.

AlexK89 commented 4 years ago

Have the same problem :)

matheusroversi commented 4 years ago

Have the same problem

gernotkogler commented 3 years ago

Same problem here

MadhumatiPathak commented 3 years ago

Facing same issue

kunal886496 commented 2 years ago

There is another way round:

onSelectedCellChange={(selectedCellInfo)=>{ // selectedCellInfo structure recieved from react-data-grid is { idx, rowIdx} where idx is column index if( selectedCellInfo.idx === columnIndexYouWantToSkip ) dataGridRef.current.selectCell({ idx: desiredColumnIndex, rowIdx: desiredRowIndex}, false) }}

This is for all the cells in a column. You can maybe, approach your problem using "onSelectedCellChange" and some code being a Super set of above ( if that helps ).

amanmahajan7 commented 1 year ago

This can be implemented using the onCellKeyDown/onCellClick props. Check the cell navigation example. https://github.com/adazzle/react-data-grid/blob/main/website/demos/CellNavigation.tsx#L79 https://adazzle.github.io/react-data-grid/#/cell-navigation

seyacat commented 2 months ago

Put false on selectCell not work at all. I need to use DOM to disable the selected cell

` const handleCellClick = (params: any, event: any) => { event.preventDefault();

if (params.column.key === "actions") {
  setTimeout(() => {
    console.log({ params });
    console.log(gridRef.current);
    //gridRef.current.selectCell({ rowIdx: 0, idx: 0 }, true); //BROKEN
    //selectCell(false); //BROKEN
    const selectedCell = gridRef.current.element.querySelector(
      "div[aria-selected='true']"
    );
    if (selectedCell) {
      selectedCell.setAttribute("aria-selected", "false");
    }
  }, 0);
}

}; `

adazzle / react-data-grid