there is an error happened in https://glideapps.github.io/glide-data-grid/?path=/story/dataeditor--lossy-copy-data.
like this:

We're trying to use this library to render a high performance table, but out of the box it doesn't seem to have either the smooth scrolling or column resizing.

When scrolling, the table only seems to scroll one row at a time:

Also, click-dragging the columns to resize doesn't seem to work, even with the allowResize and onColumnResize props specified.

The demo table featured on the website seems to have both, and works quite well. Is there by chance and sample code on how to set the table up like that?

Basic repro is here, although it's just a create-react-app template + the sample code from the README: https://github.com/austindebruyn/glidetable-simple-repro/blob/master/src/App.tsx#L32

I see that there are events for detecting when a cell is clicked (onCellClicked) and hovered (onItemHovered), but I was wondering if it would be possible to pass along or otherwise determine where in the cell the click occurred?

In my case, I'm looking to build a table with a hierarchy that is collapsible. I'd like to toggle collapsing/hiding the children when clicking the triangle on the left side, but still be able to edit the title by clicking elsewhere in the cell. I would try to achieve this by using two different cells side by side, but that wouldn't work because of the indentation. Please let me know if this information is something that could be added to onCellClicked, or how you would recommend building something like this!

Hey there! Amazing library! I'm trying to configure the datagrid to show a dropdown menu when a non-header cell is clicked. Both onHeaderMenuClick and onHeaderClicked option work perfectly, but when I try to do the same with onCellClicked, it never fires. Any ideas why this might be?

Thanks!

    const onCellClicked = React.useCallback((cell: readonly [number, number])  => {
        console.log(cell)
    }, []);
    const onHeaderMenuClick = React.useCallback((col: number, bounds: Rectangle) => {
        setMenu({ col, bounds });
    }, []);
    const onHeaderClicked = React.useCallback(() => {
        console.log("Header clicked");
    }, []);

                        <DataEditor
                            {...defaultProps}
                            columns={cols}
                            rowMarkers={"both"}
                            getCellContent={getCellContent}
                            rows={numRows}
                            onCellClicked={onCellClicked}
                            onHeaderClicked={onHeaderClicked}
                            onHeaderMenuClick={onHeaderMenuClick}
 />

On Safari and Chrome:

I'm wondering if there is a way to implement sub-rows/child-rows, e.g

| id  |  First       | Last      |
| 1    |  Isaac     | Asimov |
  Friends:
  | id |  First     | Last        |
  | 2  |  Robert | Heinlein |

Now, I can see a couple ways that that design pattern may be problematic, so I'd also be interested to hear of other methodologies around showing related/grouped data if you don't think the above is a good idea. Thanks for the hard work on this project!

It would be nice to have a way to change the colors of the table without having to overwrite onDrawCell. I see there's a theme object but it doesn't seem to be exposed in DataEditorProps.

I'm building a custom cell editor using the provideEditor attribute, but it seems that this enforces that the editor gets put inside a DataGridOverlayEditorStyle and clip-region div which adds its own border, border radius and styles input and textarea elements.

Would it be possible to support a version of provideEditor that handles its own borders to allow for more flexibility?

I see that I can add a disablePadding property to remove the padding, but it would be great if there was another attribute that could remove some of this other styling too.

Hi @schani, @jassmith, and contributors!

I am reaching out to see if you'd like to collaborate on adding your grid as one of the data output rendering options for VSCode notebooks.

You can read about Jupyter notebooks in vscode here: https://code.visualstudio.com/api/extension-guides/notebook

And custom notebooks and renderers in this post: https://code.visualstudio.com/blogs/2021/11/08/custom-notebooks

I would like to create a custom data grid renderer using your grid similar to the basic version I created this summer:

https://github.com/RandomFractals/vscode-data-table

I like that glide data grid provides search and many nice data formatting options with storybook examples.

Can I have your permission to use glide data grid in that custom renderer repo name and branding when I publish it in VSCode marketplace?

You can preview my work in that space here: https://marketplace.visualstudio.com/publishers/RandomFractalsInc

Public repo created for your data grid renderer: https://github.com/RandomFractals/glide-data-grid-renderer

I do prefer to maintain and publish them on my end, if you are open to that. Otherwise, I'll probably rename it to data-glider with proper attributions in the intro section of that extension readme.md 🙂

Taras

• onVisibleRowsChanged is badly named. It affects columns, too. Maybe onVisibleRegionChanged? - yes
• onColumnMoved takes a column index, but onColumnResized takes a GridColumn. - that's fine for now
• We use an array for X/Y coordinates, a Rectangle object for rectangles, and drawCustomCell takes x/y/width/height as four separate arguments. - make drawCustomCell take a Rectangle
• #5 - make the underlying data always present as data, with displayData being there sometimes
• allowInsertRow and onRowInserted should probably be called "add" or "append" instead of "insert" - showTrailingBlankRow and onRowAppended
• getCellsForSelection is passed a GridSelection, but only its rectangle is needed - fix it

Is there a way to group and collapse rows similar to how you can collapse columns?

In the same vein, is there any way to support 'label rows'? Similar to this example: https://www.w3.org/WAI/tutorials/tables/multi-level/#table-with-three-headers-related-to-each-data-cell. I don't see any span option, so maybe just outside of the scope of this library.

The next_evolution column. Either leave it out, or render it with the names of the Pokemon.

Hi there - I'm currently evaluating this as a potential alternative to react-table.

The features, UI, and out-of-the-box clean look here are really compelling, particularly after some of your recent updates. Nice work! One thing I'm not sure about is the best/cleanest way to go about implementing row actions (in general, think view, edit, and delete buttons which, upon click, open up either a modal or act as a link to take the user to the appropriate page).

Is there a current best practice to accomplish this? The existing UriCell takes 3 mouse clicks to click a link, so that's probably not a great solution for this purpose. Maybe show some options above the data grid upon selection of rowMarkers (though something that lives in each row would probably be preferable)?

Thanks for any thoughts!

Found this in the Freeze Columns story

Hi, I have an issue with running the example getting started code. I am running Next.js if that is relevant.

Error:

Terminal output:
Error [ERR_MODULE_NOT_FOUND]: Cannot find module ...@glideapps/glide-data-grid/dist/js/data-editor/data-editor' imported from ...@glideapps/glide-data-grid/dist/js/index.js

Console output:

index.js?46cb:323 Uncaught     at finalizeResolution (internal/modules/esm/resolve.js:276:11)
    at moduleResolve (internal/modules/esm/resolve.js:699:10)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:810:11)
    at Loader.resolve (internal/modules/esm/loader.js:88:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:241:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:56:40)
    at link (internal/modules/esm/module_job.js:55:36)

Packages:

Next.js version: v12.0.7
React version: v17.0.2
Mantine version: v3.4.3
NPM version: v8.3.0
Node version: v14.17.0

Usage:

import DataEditor, { DataEditorContainer, GridColumn, GridCell, GridCellKind } from '@glideapps/glide-data-grid';

• The rest is copied from the example put into the Next.js boilerplate template. However, getData now has a required field displayData, which I made the same as data.

Thank you

Every time the cursor moves around a lot here I'm trying to resize the rightmost column (Chrome on macOS):

Hi, I'm having an issue importing the library using Next.js.

NPM version: 6.14.11
Node version: v14.16.0
Next.js version: v9.4

Error:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/fraps/Coding/looselyhub/looselyhub/node_modules/direction/index.js
require() of ES modules is not supported.
require() of /home/fraps/Coding/looselyhub/looselyhub/node_modules/direction/index.js from /home/fraps/Coding/looselyhub/looselyhub/node_modules/@glideapps/glide-data-grid/dist/js/data-grid/data-grid-lib.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/fraps/Coding/looselyhub/looselyhub/node_modules/direction/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1080:13)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/home/fraps/Coding/looselyhub/looselyhub/node_modules/@glideapps/glide-data-grid/dist/js/data-grid/data-grid-lib.js:19:41)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/home/fraps/Coding/looselyhub/looselyhub/node_modules/@glideapps/glide-data-grid/dist/js/data-editor/data-editor.js:22:20)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32) {
  code: 'ERR_REQUIRE_ESM'
}

How I'm importing:

import DataEditor from '@glideapps/glide-data-grid' 
import { DataEditorContainer, GridColumn, GridCell } from '@glideapps/glide-data-grid'; 

Hi there!

I was wondering how theme overrides worked at the cell level? Using the drawCell function, I see that there is a themeOverride prop within the cell object, but it is readonly, and the function only returns a boolean.

I can successfully use the themeOverride on the column, but I was hoping to only modify the theme on one specific cell. Is that possible?

CodeSandbox Repro

When multiple references to the same image are in different cells in the grid, only the first one is displayed on initial load until any grid cell is hovered over.

I'd be happy to contribute to a fix for this if you can point me in the right direction, but I don't know Canvas well enough to know what might be the cause at the moment.

When editing a cell in the last column of our grid, we get this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'width')
    at minXScrollToCol (data-editor.js?590d:617)
    at eval (data-editor.js?590d:652)
    at eval (data-editor.js?590d:674)
    at eval (data-grid-overlay-editor.js?4992:121)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:3994)
    at invokeGuardedCallback (react-dom.development.js?61bb:4056)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js?61bb:4070)
    at executeDispatch (react-dom.development.js?61bb:8243)
    at processDispatchQueueItemsInOrder (react-dom.development.js?61bb:8275)

Here's a reproduction CodeSandbox. It looks like it only happens when scrolled down at least one row.

You can add the following example to docs to show how you can have the datagrid fit to the size of the container:

const wrapper = useRef(null);
  const [dimensions, setDimensions] = useState({
    height: 300,
    width: 1000,
  });

  const calcHeight = () => {
    if (wrapper?.current) {
      const rect = wrapper.current.getBoundingClientRect();
      setDimensions({
        height: rect.height,
        width: rect.width,
      });
    }
  };

  useEffect(() => {
    window.addEventListener("resize", calcHeight);
  }, []);
  useEffect(() => {
    calcHeight();
  }, [wrapper, wrapper?.current]);

  return (
    <div ref={wrapper}>
      <DataEditorContainer width={dimensions.width} height={dimensions.height}>
        <DataEditor
          rowMarkers={false}
          cellXOffset={0}
          showTrailingBlankRow={false}
          allowResize={true}
          getCellContent={getData}
          columns={getColumns()}
          rows={1000}
        />
      </DataEditorContainer>
    </div>
  );
}

Hello, I think I've found a couple bugs.

On the 3.1.3-alpha6 version I've had issues with images disappearing, and on prior versions I'm seeing issues with flickering. When I try to load a codesandbox with version 3.1.3, I'm unfortunately getting the following error as well: "Cannot read properties of undefined (reading 'Boolean')". On my local install it works though with the exact same configuration.

Version with images disappearing, and "Cannot read properties of undefined (reading 'Boolean')" error:
https://codesandbox.io/s/create-react-app-template-forked-om6lm?file=/TestCanvasGrid.tsx

Here is a gif of the 3.1.3-alpha6 local install with the images disappearing. They return when I click on the cells. The file and package configuration used is identical to the codesandbox above.
Gif of images disappearing

Version 3.0.4 with images flickering:
https://codesandbox.io/s/solitary-sunset-8t7fj?file=/src/TestCanvasGrid.tsx

Edit:
It appears that there's no way to disable editing for a BooleanCell (other than ignoring it in your onCellEdited callback, which, admittedly, is easy enough). allowEdit and allowOverlay are both ignored. Could one of those be made to have that effect?

Original question:
I noticed BooleanCell.allowEdit is a required attribute, but it doesn't seem to be used for anything.

1. If it does do something, I'm curious what?
2. If it doesn't, could it be removed or at least made optional?

Hello! So I've been able to almost get it working to make the append button prepend a row, but the main issue is that it scrolls to the bottom row every time, whereas I'd like to configure it to scroll to the top. Is there a built in way to do this?

https://grid.glideapps.com/
Simply scroll to the bottom of the grid. The screen goes blank as react doesn't know what to render anymore.

On Safari, scrolling up:

I'm guessing it's trying to look at row -1.

On your demo page, when I scroll to the bottom I get the following errors:

https://grid.glideapps.com/

Uncaught (in promise) Error: This page contains the following errors:error on line 3 at column 66: AttValue: " or ' expected
Below is a rendering of the page up to the first error.

TypeError: Cannot read property 'row' of undefined

I'm using Chrome on Mac
Version 90.0.4430.85 (Official Build) (x86_64)

Hello,

There is a bug when you edit something and you clic in an other cell.
Example -> https://glideapps.github.io/glide-data-grid/?path=/story/dataeditor--add-data
You double clic Title for row 6, you change data, you don't press enter and you click for example on Title row 12, now you have you Title Row 6 updated but between row 6 and 12 you have blank cells. If you click again on an other cell it re-appears.
Now if you retry to update Title row 6, and you click on an other column then all your cells title row > 6 are blank.

I think this line is causing problem:

Bugs to fix:

• Selecting a row doesn't highlight the blank area
• DND of headers should not happen if callback is not set
• Cannot type into blank trailing row to start editing new row
• Rich text links do not open in new tab

Stories:

• one million rows
• ten million cells
• ten thousand columns
• adding columns
• smooth scrolling
• readonly grid
• editable grid
• resizable columns
• multi select columns
• custom draw

Would it be possible to add support for custom rendering of the header cells as well?

Ideally I'd like to be able to have the capability to do something like this within the header cells:
https://codesandbox.io/s/9m9qs

I imagine the easiest way to implement this would be an additional prop such as the following:
drawHeaderCell?: (args) => boolean;

Otherwise, this library is perfect for my needs. Fantastic job.

Where is it hosted?

type EditableGridCell = TextCell | ImageCell | BooleanCell | MarkdownCell | UriCell | NumberCell;

EditableGridCell does not have a common property across union types that represents the new value, so you have to do clumsy checking in onCellEdited (for example). It would be nice to be able to:

onCellEdited={([col, row], editedCell) => console.log(editedCell.newValue)}

In order to get Glide working in a Next.js app I need to disable server side rendering for the component. This appears to be due to the usage of 'window' in the browser detect code which is not available server side.

Server Error

ReferenceError: window is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Object.
file:/workspace/node_modules/@glideapps/glide-data-grid/dist/js/common/browser-detect.js (7:17)

After following the initial setup steps under the HTML/CSS Prerequisites and the code from the using section of the README, I am not able to enter the editing mode by clicking on a cell. In the DOM the portal element is not changing.

Is there something that I need to enable in order to allow for the editing UI when clicking on a cell? I am using an EditableGridCell. If I set allowOverlay to true I do get an editable box which appears to work as expected.

I'm trying to implement onHover behavior where some additional info pops out if the cursor hovers over a cell for a given time. The coordinates that I get through onItemHovered are unusable as they seem to somehow relate to the document scroll position.

Do you have any suggestions?

The require of carousel.min.js does not work when using in a Next.js app. The following error occurs:

./node_modules/react-responsive-carousel/lib/styles/carousel.min.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules/@glideapps/glide-data-grid/dist/js/data-grid-overlay-editor/private/image-overlay-editor.js

Commenting out the require does allow the library to load.

rows.length, which is what we pass as the rows property, is 1510, but getCellContent is called with row 1511, which is two past the last row.

This crashes the demo page on Chrome when scrolling down:

Drawing large images into cells is pretty slow, not only on the first paint of the image but on subsequent paints as well. This turns into stuttering scroll experiences.

The hangup when resizing large images into small cells is something we'll always have to pay, but perhaps we can improve scrolling behavior by keeping a "thumbnail cache" for them.

More of a question than an issue, but how much support is there for IE11? According to caniuse, the canvas api is supported in IE11 but I'm not familiar with any limitations if there are any.

I realize there's not a huge demand for IE11 support but it'd be great to know, just in case.

This seems to happen only when tabbing from the column to the left. In the number column, type some letters and press enter:

• Make sure image editor can be extended correctly for editing scenario in Glide
• Ensure image rendering can extend to support glide: urls
• Usage docs
• Examples

When selecting cells for editing in mobile safari the cells often do not open in the expected position within the grid.

I have the following error when trying to use the DataEditor component in my NextJS project. The error tells me there is an unexpected token '.' in a file inside the nodes_modules folder.

Yet, I tried to use this component in a new React project, in order to see if I have the same error, and everything works well.

How can I fix it in my NextJS project?

Thanks for your answer!

It's hard to use when trying to scroll down the list on mobile because it also scrolls horizontally too. Freeze horizontal scrolling if the intent is to vertical scroll and vice-versa.

See this sample, tried to scroll down the list, also scrolled horizontally, lost track of the position I was looking for: https://imgur.com/a/eFBvWHC

Thank you for adding the PositionableMouseEventArgs to the hover and click events.

I see that when I hover over a cell it updates on mouse enter, however it doesn't update when hovering different areas of the cell. I was hoping to use the hover coordinates to position a tooltip over an icon within the cell. Is there a configuration option or prop I'm missing? Or if not, is it something you were looking to add support for?

Thank you for such a wonderful library.