Describe the bug
A clear and concise description of what the bug is.

Current behavior
A clear and concise description of what you current see.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots or gifs
If applicable, add screenshots to help explain your problem.

Your environment details

• Device: [e.g. mobile/desktop]
• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]

Hi folks,
Apologies — I couldn’t find this information in the docs. Does ReactGrid support virtualization? For example if I have a very large data set can I confidently pass it to ReactGrid so that it will gracefully reuse components and render only what is in or near the viewport?
Great work all around, this is by far the best UX I have found yet! (Your sticky headers don’t lag — that’s amazing!)
best,
DreGre

The product is in alpha stage now. It does not work.
We need to disable the website.

Describe the bug
Using the Sass variable $cell-border-color does not result in border colors being set properly.

Current behavior
The borders are white no matter what color I use for $cell-border-color.

Expected behavior
I expect the color value to appear as the cell borders.

Screenshots or gifs

Your environment details

• Device: desktop
• OS: macOS
• Browser chromium/electron

It looks like the styles are being set for the cell here without regard for CSS styles. https://github.com/silevis/reactgrid/blob/develop/src/lib/Components/CellRenderer.tsx#L60

Because a style tag is used it overrides any upstream css values.

Current behavior
The Dropdown Cell menu doesn't open

Expected behavior
Dropdown menu should open on clicking the down arrow

Your environment details

• Browser chrome

Describe the bug
Cell chevron does not collapse or expand when property 'nonEditable' is set to true.

Current behavior
When property 'nonEditable' is set to true. Cell is not editable but i can't collapse or expand options.

Expected behavior
Chevron cell is not editable and i can collapse or expand options.

Your environment details

• chrome

Describe the bug
If the label of a column does not fit in the column, the cut name is displayed.
It would be nice to define a property for header that allows displaying a description of the column when hovering over the column label. For example:

Current behavior
Currently, a hover over the column is not displayed. If the width of the column is short, the name is not displayed correctly.

Expected behavior
Currently, a hover over the column is not displayed. If the width of the column is short, the name is not displayed correctly.

Issue
I am working with react v 18 and i would like to use react-grid library. If i need to shift to other react versions i need to downgrade some libraries also . Is there any fix for this

Environment details

• OS: Ubuntu
• Browser : Chromium

Describe the bug
First key press on number cell is not inserted into the cell.

Current behavior

1. Select number cell
2. Press any number on the keyboard
3. Editor opens but pressed number does not appear

Expected behavior
3. Editor opens and pressed number does appear in editor.

Screenshots or gifs

Your environment details
Tested on Chrome on PC

I used the data from the README and cant select anything on first and third row.

Describe the bug
Clicking on examples links will take you to a broken example in the code sandbox page https://codesandbox.io/s/reactgrid-creating-new-cell-template-pdiux?file=/src/index.tsx

Current behavior
https://codesandbox.io/s/reactgrid-creating-new-cell-template-pdiux?file=/src/index.tsx

Expected behavior
Examples should be working for the expected implementation

Your environment details

• Device: desktop
• OS: Windows
• Browser: chrome

We need to have a cell which is providing a simple dropdown with options.

• space should open the drop-down

Describe the bug
Dropdown is not working

Current behavior
Clicking on the dropdown doesn't show the selection popup

Expected behavior
The dropdown selection will open

Screenshots or gifs
If applicable, add screenshots to help explain your problem.

Your environment details

• Device: desktop
• OS: windows
• Browser: chrome

Steps to reproduce:

1. Double click on a cell in order to make it editable
2. Change the cell value
3. Click on Escape key.

Current result:
The cell value is updated with the new value.

Expected result:
The cell value should remain the same.

Describe the bug
A clear and concise description of what the bug is.

'ReactGrid' cannot be used as a JSX component.
  Its instance type 'ReactGrid' is not a valid JSX element.
    Type 'ReactGrid' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, refs
    45 |   const columns = getColumns();
    46 |
  > 47 |   return <ReactGrid rows={rows} columns={columns} />;
       |           ^^^^^^^^^
    48 | }
    49 |

I copy pasted code from getting started
using react 18.2.0

• Device: desktop
• OS: Windows
• Browser: chrome

Describe the bug
When I use enableRangeSelection function. Is there any way I can get the values ​​in that cell to the outside? Thank you everyone for reading

Current behavior
I select multiple cells

Expected behavior
I can get the values ​​in that cell to the outside. For example, to display in a modal

Screenshots or gifs

Your environment details

• Device: Desktop
• OS Windown
• Browser :Chorme

I would like to handle column clicking events so I can allow the user to sort the data in the column similar to filters in excel or google sheets.

How to implement:

• Expose a click handler on the columns
• Allow a new property for icons to be placed on the right-hand side of the column header.

Is this possible?

Describe the bug
Dropdown cell doesn't update when selected id changes from state.

Current behavior
I've made a component that contains a grid. One of the columns is dropdown. This component receives an array of object from props and converts it to rows. The problem is that when props change, and selected value from that cell is changed, the cell stays with the same label selected.

Expected behavior
When selected value changes programatically it should update selected label.

Screenshots or gifs

*"resource" comes from mapping props array
Cell 0 which is the same id than selected value, but in text cell, is updating correctly. Problem comes with dropdown cell.

Your environment details

• Device: Desktop
• OS: Windows
• Browser: Chrome

Am I missing something? Or I just found a little bug?

Thanks for your help in advance.

Hi guys!
Firstly, I'd like to say Thank you for your library.
Secondly, could you share your plans about implementing rest features for merging/unmerging cells?

Is there any way to put an image in a cell?

Expected behavior
https://reactgrid.com/examples/?example=athletes-exercises
I want to create a sheet with formulas like you have shown in the athletes example. I am not sure how to implement this, I tried to find the example code, but I am not seeing anywhere.
could you please provide me an example of how can i implement formulas as I have seen in the athletes example

Describe the bug
When I click on a cell whose type has letters and start writing something in another language, the first letter is always in English. And it's impossible to catch this event in the cell template on onChange or onFocusin handles if I use it custom.

Expected behavior
When I edit a cell, the first character should be in the same language as the keyboard layout

Video example

Describe the bug
Examples provided have data embedded within the src/tsx file. Looking for an example

• to load external file
• to load the headers of the CSV file dynamically

Current behavior
Current examples have sample data embedded within the source code as example

const getPeople = (): Person[] => [
  { name: "Thomas", surname: "Goldman" },
  { name: "Susie", surname: "Quattro" },
  { name: "", surname: "" }
];

Expected behavior
Example to load external csv file something like below and get header rows automatically

const getPeople = (): Person[] => [
 load("../src/sample.csv")
];

const getColumns = (): Column[] => [
load ("row1", header_columns)
];

Describe the bug
When using NextJS and the ReactGrid ReadMe example the following error occurs

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:992:16)
    at Module._compile (internal/modules/cjs/loader.js:1040:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:941:32)
    at Function.Module._load (internal/modules/cjs/loader.js:782:14)
    at Module.require (internal/modules/cjs/loader.js:965:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at eval (webpack-internal:///@silevis/reactgrid:1:18)
    at Object.@silevis/reactgrid (/Users/[redacted]/.next/server/pages/index.js:126:1)
    at __webpack_require__ (/Users/[redacted]/.next/server/pages/index.js:23:31)

Reporting this as a bug because I don't know enough about the module systems / NextJS to know if this should be fixed in reactgrid, or if the workaround I've included is actually the right thing to do (if so, I'd propose adding it to the ReadMe for this project, as NextJS is very popular)

Current behavior
The application fails to compile

Expected behavior
The grid component should work. This can be achieved by using next-transpile-modules as documented

In next.config.js

const withTM = require('next-transpile-modules')(['@silevis/reactgrid']); 
module.exports = withTM()

Environment : ReactJS 18.2/Typescript
ReactGrid Version : 4.0

Tried following the basic code here at https://reactgrid.com/docs/4.0/1-getting-started/ . We managed to get the grid to display, but when we tried to edit any cell (double click any cell), we would get a "t is undefined" error.

Full detailed error:
Ml@http://localhost:3000/main.9fd1c32d1ba239874528.hot-update.js:9469:11 updateReducer@http://localhost:3000/static/js/bundle.js:34121:26 useReducer@http://localhost:3000/static/js/bundle.js:35332:20 useReducer@http://localhost:3000/static/js/bundle.js:50731:25 Al@http://localhost:3000/main.9fd1c32d1ba239874528.hot-update.js:9493:46 renderWithHooks@http://localhost:3000/static/js/bundle.js:33770:31 updateFunctionComponent@http://localhost:3000/static/js/bundle.js:36970:24 beginWork@http://localhost:3000/static/js/bundle.js:38917:20 beginWork$1@http://localhost:3000/static/js/bundle.js:44665:18 performUnitOfWork@http://localhost:3000/static/js/bundle.js:43823:16 workLoopSync@http://localhost:3000/static/js/bundle.js:43736:26 renderRootSync@http://localhost:3000/static/js/bundle.js:43705:11 recoverFromConcurrentError@http://localhost:3000/static/js/bundle.js:43113:38 performConcurrentWorkOnRoot@http://localhost:3000/static/js/bundle.js:43014:26 workLoop@http://localhost:3000/static/js/bundle.js:52132:46 flushWork@http://localhost:3000/static/js/bundle.js:52106:18 performWorkUntilDeadline@http://localhost:3000/static/js/bundle.js:52390:25 Al@http://localhost:3000/main.9fd1c32d1ba239874528.hot-update.js:9489:11 div div n@http://localhost:3000/main.9fd1c32d1ba239874528.hot-update.js:9602:29 Dl@http://localhost:3000/main.9fd1c32d1ba239874528.hot-update.js:9626:11 ya@http://localhost:3000/main.9fd1c32d1ba239874528.hot-update.js:7898:11 n@http://localhost:3000/main.9fd1c32d1ba239874528.hot-update.js:8454:29 App@http://localhost:3000/main.91a117094e631e45461a.hot-update.js:74:66

Not sure if this is due to ReactJS 18.2 version? We were only able to install Reactgrid on 18.2 by running it with the --legacy-peers-deps flag.

Describe the bug
A clear and concise description of what the bug is.

Current behavior
A clear and concise description of what you current see.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots or gifs
If applicable, add screenshots to help explain your problem.

Your environment details

• Device: [e.g. mobile/desktop]
• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]

Describe the bug
We create a column for emails and we had validator for the email.
We enter invalid email (The cell element gets class name of invalid)

Current behavior
The cell value remains the same.

Expected behavior
The cell value should display an error message if the consumer wants to.

Remove:
4. Render your component
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);
Open examples on stackblitz.com

A part of rows is hidden, it only appears when I click on the cell position.

"ReactGrid allows you to create custom data grids inside your ReactJS application while providing a spreadsheet-like look and feel."

Better short and crunchy:
"Add spreadsheet-like behavior to your React app."

After entering the edit mode in formatted number cell, the input contains a formatted value, instead of plain one.
The bug doesn't occur if the edit mode is turned on by a pointer event.
The bug occurs only if the nan to zero option is enabled.

I expect the edit mode input to contain plain, ready to edit, number value.

• Desktop
• Win10
• Chrome 86.0.4240.75

Describe the bug
I'm trying to edit a cell but I get an Error: cannot read properties of undefined (reading 'scrollableElement')

Current behavior
I get an error every time I change the content of a cell.

Expected behavior
The cell should get a new value without error.

Screenshots or gifs

Your environment details

• Device: desktop
• OS: macOS
• Browser chrome

Describe the feature
I cannot seem to find the wrap text feature for cells in a column. Here is how it works in Excel. Is there a way to do this? If not, I would like to request this feature.

Current behavior
All cells are unwrapped making paragraphs difficult to edit.

Expected behavior
A flag for columns to make the wrap text feature similar to how Microsoft Excel wraps the text.

Screenshots or gifs
Her is a screenshot of how it is displayed in Excel.

import "@silevis/reactgrid/styles.css";

would be better than

import "@silevis/reactgrid/lib/assets/core.css";

Describe the bug
I got an exception on https://reactgrid.com/examples/?example=multi-user

See error details below but the issue is "Rendered more hooks than during the previous render.". (You may never use hooks inside an if statement.).

I am able to repro the issue from the example consitently by Dragging the "is active" column into the sticky'd area.

Screenshots or gifs

Error Content

Minified React error #310; visit https://reactjs.org/docs/error-decoder.html?invariant=310 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Error: Minified React error #310; visit https://reactjs.org/docs/error-decoder.html?invariant=310 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at ro (https://reactgrid.com/framework-5631da51a100b78da9c4.js:2:71062) at ao (https://reactgrid.com/framework-5631da51a100b78da9c4.js:2:71313) at Object.useState (https://reactgrid.com/framework-5631da51a100b78da9c4.js:2:77635) at Object.t.useState (https://reactgrid.com/framework-5631da51a100b78da9c4.js:2:11559) at e.t.render (https://reactgrid.com/191d5c1a0194a95d452020f30c3ec9bdcb7e560a-9b50cfe10ba32f2fe7b8.js:2:31473) at el (https://reactgrid.com/8abd31c1-62d1db579c1613a0b298.js:1:176234) at to (https://reactgrid.com/framework-5631da51a100b78da9c4.js:2:70511) at Ao (https://reactgrid.com/framework-5631da51a100b78da9c4.js:2:80029) at Bu (https://reactgrid.com/framework-5631da51a100b78da9c4.js:2:123921) at Ei (https://reactgrid.com/framework-5631da51a100b78da9c4.js:2:109959) at el (https://reactgrid.com/8abd31c1-62d1db579c1613a0b298.js:1:173812) at ta (https://reactgrid.com/8abd31c1-62d1db579c1613a0b298.js:1:446460) at https://reactgrid.com/8abd31c1-62d1db579c1613a0b298.js:1:177223 at https://reactgrid.com/8abd31c1-62d1db579c1613a0b298.js:1:177978 at al (https://reactgrid.com/8abd31c1-62d1db579c1613a0b298.js:1:178933) at div at cl (https://reactgrid.com/8abd31c1-62d1db579c1613a0b298.js:1:179642) at ll (https://reactgrid.com/8abd31c1-62d1db579c1613a0b298.js:1:178772) at oa (https://reactgrid.com/8abd31c1-62d1db579c1613a0b298.js:1:446749) at div at div at t (https://reactgrid.com/8abd31c1-62d1db579c1613a0b298.js:1:171265) at Ui (https://reactgrid.com/8abd31c1-62d1db579c1613a0b298.js:1:171915) at t (https://reactgrid.com/8abd31c1-62d1db579c1613a0b298.js:1:456310) at div at C (https://reactgrid.com/191d5c1a0194a95d452020f30c3ec9bdcb7e560a-9b50cfe10ba32f2fe7b8.js:2:279224) at be (https://reactgrid.com/191d5c1a0194a95d452020f30c3ec9bdcb7e560a-9b50cfe10ba32f2fe7b8.js:2:49278) at div at div at p (https://reactgrid.com/f926e40590dbf8052a96fd5dcd43a02a65b8b6f6-f10ebc367c57d9ce0f0a.js:2:118292) at div at u (https://reactgrid.com/f926e40590dbf8052a96fd5dcd43a02a65b8b6f6-f10ebc367c57d9ce0f0a.js:2:103024) at div at k (https://reactgrid.com/component---src-pages-examples-tsx-6b3c45189a6680440a3c.js:1:1009) at D (https://reactgrid.com/component---src-pages-examples-tsx-6b3c45189a6680440a3c.js:1:18061) at div at t (https://reactgrid.com/component---src-pages-examples-tsx-6b3c45189a6680440a3c.js:1:442) at ul at u (https://reactgrid.com/f926e40590dbf8052a96fd5dcd43a02a65b8b6f6-f10ebc367c57d9ce0f0a.js:2:44725) at div at p (https://reactgrid.com/f926e40590dbf8052a96fd5dcd43a02a65b8b6f6-f10ebc367c57d9ce0f0a.js:2:118292) at div at u (https://reactgrid.com/f926e40590dbf8052a96fd5dcd43a02a65b8b6f6-f10ebc367c57d9ce0f0a.js:2:103024) at div at u (https://reactgrid.com/f926e40590dbf8052a96fd5dcd43a02a65b8b6f6-f10ebc367c57d9ce0f0a.js:2:480) at $ (https://reactgrid.com/component---src-pages-examples-tsx-6b3c45189a6680440a3c.js:1:18966) at main at t.a (https://reactgrid.com/f926e40590dbf8052a96fd5dcd43a02a65b8b6f6-f10ebc367c57d9ce0f0a.js:2:40859) at RNt/.t.default (https://reactgrid.com/component---src-pages-examples-tsx-6b3c45189a6680440a3c.js:1:19994) at e (https://reactgrid.com/app-9ca9e758c0c1fee9a121.js:2:29336) at t at div at e (https://reactgrid.com/app-9ca9e758c0c1fee9a121.js:2:65405) at S (https://reactgrid.com/app-9ca9e758c0c1fee9a121.js:2:65152) at e (https://reactgrid.com/app-9ca9e758c0c1fee9a121.js:2:64191) at b (https://reactgrid.com/app-9ca9e758c0c1fee9a121.js:2:62357) at j at e (https://reactgrid.com/app-9ca9e758c0c1fee9a121.js:2:25892) at e (https://reactgrid.com/app-9ca9e758c0c1fee9a121.js:2:50672) at o (https://reactgrid.com/app-9ca9e758c0c1fee9a121.js:2:54340) at d (https://reactgrid.com/app-9ca9e758c0c1fee9a121.js:2:13973) at c (https://reactgrid.com/app-9ca9e758c0c1fee9a121.js:2:23748) at https://reactgrid.com/app-9ca9e758c0c1fee9a121.js:2:86860 at https://reactgrid.com/app-9ca9e758c0c1fee9a121.js:2:13786 at e (https://reactgrid.com/app-9ca9e758c0c1fee9a121.js:2:51953) at e (https://reactgrid.com/app-9ca9e758c0c1fee9a121.js:2:62501) at b (https://reactgrid.com/app-9ca9e758c0c1fee9a121.js:2:62357) at n (https://reactgrid.com/app-9ca9e758c0c1fee9a121.js:2:53841) at n

Your environment details

• Device: Desktop
• OS: Windows
• Browser: Chorme

hi, ReactGrid is great. i'm wondering whether the table can be saved as csv/xlsx file. Thanks

demos is broken https://0754c.csb.app/

Describe the bug
I have created a custom cell template and inside of the actual template I do have 2 buttons. The problem I am facing is for the reorderable columns, when I click on those buttons the 'onClick' event is fired just once, the first time. If I do press multiple times on the buttons, nothing happens. If I press on the other column buttons and coming back on the first column, the 'onclick' event fires for the first time and that's it.

Expected behavior
The 'onClick' event should fire each time I press the button.

Describe the bug
when double clicking cell tables gone and this error message show up
'can't access property "scrollableElement", t is undefined'

Current behavior
the table gone and error message show up

Expected behavior
should be able to edit the cell

Screenshots or gifs

Your environment details

• Device: Desktop
• OS: Arch Linux
• Browser: Firefox, Google Chrome

Step to produce

• completely follow the getting started guide

• yarn create react-app --template typescript

• yarn install @silevis/reactgrid

• HERE IS THE App.tsx

import React from "react";
import "./App.css";

import {Cell, Column, ReactGrid, Row} from "@silevis/reactgrid";
import "@silevis/reactgrid/styles.css";

interface Person {
    name: string;
    surname: string;
}

const getPeople = (): Person[] => [
    {name: "Thomas", surname: "Goldman"},
    {name: "Susie", surname: "Quattro"},
    {name: "", surname: ""}
];

const getColumns = (): Column[] => [
    {columnId: "name", width: 150},
    {columnId: "surname", width: 150}
];

const headerRow: Row = {
    rowId: "header",
    cells: [
        {type: "header", text: "Name"},
        {type: "header", text: "Surname"}
    ]
};

const getRows = (people: Person[]): Row[] => [
    headerRow,
    ...people.map<Row>((person, idx) => ({
        rowId: idx,
        cells: [
            {type: "text", text: person.name},
            {type: "text", text: person.surname}
        ]
    }))
];

function Grid() {
    const [people] = React.useState<Person[]>(getPeople());
    const rows = getRows(people);
    const columns = getColumns();

    return (
        <div>
            {   // @ts-ignore
                (<ReactGrid columns={columns} rows={rows} />)
            }
        </div>
    )
}
function App() {
    return (
        <div className="App">
            <Grid />;
        </div>
    );
}

export default App;

1. created new react app.
2. followed description from README
   =>
   Failed to compile
   ./node_modules/@silevis/reactgrid/lib/assets/core.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./node_modules/@silevis/reactgrid/lib/assets/core.scss)
   To import Sass files, you first need to install node-sass.
   Run npm install node-sass or yarn add node-sass inside your workspace.
   Require stack:

Describe the bug
The cell editor is misplaced if one of the ancestors of the component is css translated (transform: translate(10px, 10px))

Current behavior
The cell editor has a margin of x, y pixels if one of the ancestors have "transform: translate(x px, y px)" css rule.

Expected behavior
The cell editor is displayed where it is meant to be without any margins.

Screenshots or gifs

Your environment details

• Device: Desktop
• OS: Windows 10
• Browser: Chrome 100.0.4896.127

Describe the bug
During the first render react grid header cell should be not focusable.

Current behavior
On first render reactgrid component can selected header cell but after change focusc can't select the cell anymore.

Expected behavior
Header cell is always not focusable.

Your environment details

• chrome

I couldn't find in the docs any reference to testing. Is there a way to create tests to validate functionalities inside the reactgrid component? (for example, using react testing library or enzyme)

I was on https://reactgrid.com/examples/?example=customization and I don't see the source code for these examples.

Where can I find the source code for the above examples?

Describe the bug
I copied the sample in for context menu. Paste option does nothing, does not trigger on onCellsChanged, no error in the console log.

Current behavior
When I right click an empty cell or a filled cell and I select Paste, nothing happens.

Expected behavior
I expect the cell highlighted to be filled with the clipboard value.

Your environment details

• Device: Desktop
• OS: macOS Montery v12.4
• Browser Chrome, v102.0.5005.115

Describe the bug
I have calculate values from the row onto TOTAL VALUE cell, but can't get this calculated numbers from cell. Unfortunately there are no examples in DOCS or tutorials how to manage onChange event in computed cells

Current behavior
Calculated number in cell don't stores anywhere

Expected behavior
Wanted to have access to computed non editable cells f.e to store value in a state

Hello,

ReactGrid is a nice project!

But, it's possible use/add column FILTER and DATA ORDER column features?

Case:

I am using a custom CellTemplate where I put some modifications on handleKeyDown. I want to take general inputs (like alphanumeric, symbols), basically characters we usually type on an Excel/gsheet cell.

I notice that ReactGrid always take the capital form for each letter I type when I am on an active selected cell (just right before it goes to edit mode). Ex: for both A and a, I got 65 on handleKeyDown. I checked on keyCodes.ts on the lib repo, there only listed the ASCII codes for capital letters.

Expectation:

Able to differentiate uppercase and lowercase alphabet characters on handleKeyDown

Note
I'd like to recommend adding additional key codes on the constants. Also welcome for any workaround I can try in the meantime :)

From a logical and marketing perspective it would be better to offer "Enable" here