rowsncolumns / grid

Declarative React Canvas Grid primitive for Data table, Pivot table and more :boom:

Rows n' Columns

React Components for Tabular data.

This monorepo contains

1. Grid - MIT Licensed Declarative Canvas Grid. Refer to Storybook for all demos.

Local development

The monorepo is managed using lerna and yarn workspaces. To get started

1. Clone the repository to rowsncolumns directory

git clone https://github.com/rowsncolumns/grid.git rowsncolumns

2. Install npm dependencies using yarn

// Switch to the new directory
cd rowsncolumns

// Install all dependencies
yarn

3. Compile typescript files to Javascript

yarn build

Run storybook

yarn storybook

And open http://localhost:9002/ in Chrome

All stories are located in packages/storybook directory

Watch and compile typescript

yarn build:watch

grid's Issues

useEditable: submitting the value with mouse click on another cell uses outdated onSubmit callback

I use the useEditable hook. I provide onSubmit callback to it.

I noticed that when I submit with Enter key hit and with the navigating away from the edited cell (clicking on other cell) the behaviour is different.

Click on another cell results in outdated onSubmit callback instance call (not the one provided in recent render, e.g. recent invocation of useEditable).

Possible cause for this is the dependency list of the handleMouseDown inside useEditable.
https://github.com/rowsncolumns/grid/blob/master/packages/grid/src/hooks/useEditable.tsx#L819

const handleMouseDown = useCallback(
    (e: React.MouseEvent<HTMLDivElement>) => {
      /* Persistent input, hides only during Enter key or during submit or cancel calls */
      if (!hideOnBlur) {
        return;
      }
      if (currentActiveCellRef.current) {
        if (isDirtyRef.current) {
          handleSubmit(currentValueRef.current, currentActiveCellRef.current);
        } else {
          handleCancel();
        }
      }
      initialActiveCell.current = undefined;
    },
    [hideOnBlur] //   <------------------------------- does this cause problem?
  );

handleMouseDown seems to be regenerated only on hideOnBlur change. Thus it captures very first handleSubmit (which in turn captures very first onSubmit)

Excel example missing

https://github.com/rowsncolumns/grid/tree/master/examples/excel-worksheet

In the README is missing

useEditable does not set scrollPosition for the first Editor render

When I move the viewport (e.g. with scroll) and then activate the in-cell editor the values passed in scrollPosition for EditorProps still contains

{
  scrollTop: 0;
  scrollLeft: 0;
}

instead of actual scroll values. When I then continue scrolling, it immediately gets the correct scroll value.
But the very first render contains wrong zero value of the scrollPosition.

Possible cause for this is that useEditable hook tracks the scrolling only when the editor is shown (e.g. activeCell is defined).

 const handleScroll = useCallback((scrollPos: ScrollCoords) => {
    if (!currentActiveCellRef.current) return;
    setScrollPosition(scrollPos);
  }, []);

Responsiveness

I'm having trouble making the grid responsive.

Can we make it so that the grid takes all the '100%' of the parent width instead of specifying exact width and height?

Fill-Handle does not work with React 18

The Fill-Handle does not seem to work anymore with React 18. I've started debugging this and noticed that fillSelection is null when it is checked. The setFillSelection callback (which should populate the var) triggers too late.

The rest of the function could either be moved inside the setFillSection(prev => ... callback or the fillSelection state is tracked in a ref as well.

I'll gladly provide a PR but want to discuss which approach is preferred.

Example with react-table

Amazing library. I noticed that the react-table example only has a package.json file and hasn't been updated for 8 months. Are there any plans to publish this to showcase how it would work together?

Thanks!

Point users from the old package to this one.

Can we leave some reference in In the old pacpage
pointing to this one.

I stumbled upon this repo searching for an alternative for react-konva-grid as it only supported react 16.
Please leave a reference on the old package pointing the users to this one so they can find it easily

Auto complete other columns

Hello, when you type 1-2-3 or 14:30, 14:40 in Excel and drag it down, it automatically increases the value and saves it. When I tested this on the examples on the website I couldn't. is it possible for me to do this?

Use inside stage?

I have an app that already makes use of Konva Stages and Layers. Now I want to insert table into it, using this library.

However this is what getting fired when I'm trying to do:

My code, a simple one:

      <div id="slide-interactive-editor">
        <div id="editor-container" />
        <h2>{slideTitle}</h2>

        <Stage
          className="konva-stg"
          width={MinimumCanvasSize.WIDTH}
          height={MinimumCanvasSize.HEIGHT}
        >
          <Layer ref={layerRef}>
            {slideList[slideBuilderMeta.selectedIndex]?.slideBlocks.map((n, i) => {
              return (
                <SlideBlock
                  key={i}
                  {...n}
                  onSelect={(blockId) => {
                    selectBlock(slideBuilderMeta.selectedIndex, blockId);
                  }}
                />
              );
            })}

            <Grid
              rowCount={100}
              columnCount={100}
              width={800}
              height={800}
              rowHeight={(rowIndex) => 20}
              columnWidth={(columnIndex) => 100}
              itemRenderer={(props) => <Cell {...props} value={"Test"} />}
            />
          </Layer>
        </Stage>
      </div>

Is this library still live?

I spent a lot of time doing a POC on this library and trying to install it, at the end I got to know that this is brought by ROWS, is it true?

updating the react version for v_17.0.0

stop demo animation

the animation here is really annoying:

https://www.rowsncolumns.app/demo

is it possible to disable?

[DOCUMENTATION] getting started and related links

Trying to install rowsncolumn package following the get started page but the yarn add @rowsncolumns/spreadsheet doesn't work.

I found out the the repository itself on github no longer exist as well, or might have been changed to this one, grid ?

Thanks for your feedback, the tool seems amazing, hope it's still available.

Kevin

Can you reference filter views by name?

Instead of A5 I'd like to use structured referencing:

SUM(DeptSales[Sales Amount])

instead of

=Sum(C2:C7) 

Is this possible?

How far off could we do something like this?

Grid doesn't work, throw some error

Grid doesn't work, throw some error

Is it that because I used in React 18.2.0 ? like this https://github.com/rowsncolumns/grid/issues/14?

Runtime JavaScript error with v8.0.8

I have been successfully using v7.0.1 from npm.
But when I updated to v8.0.8 I get a JavaScript error in Chrome's console (see attached image), as soon as I have the Grid imported on my page.
Any suggestions what may cause it? Has the build/publish process changed after v7.0.1?

[question] Can I set variables in formula?

Hi good day! this project looks amazing cheers!!!
I have some questions:

• Can I set custom variables to be evaluated in cell? for example =A1*MY_OWN_VARIABLE
• Can I eval some formula outsite a table, server side, for example, I want to make a website with an administrator, with this table and other site which show the public data, then, if I put some formula in one cell, how could I get the evaluated value, eval before sync with the server or could I sync the raw value of cell (the formula) and eval from server? this question is because I thinking some user, some one, me, could put a formula with something like "if date less than"... so meabe need eval at the momento of serve the final data
• Can I make alias for select value from other cell? I'm thinking allow put a formula in one cell but I want restrict to select only other cells of the same row, something like =$B$this * .8 or even better =$price * .8 (where $price is an alias for column B)
• finally XD can I put some basic nodes like <button></button>, <img />, <a></a> in custom cell rendered?

thank you
good day!

Grid breaks in React 18

Is this project live?

This grid has very interesting features especially with data not bound feature.

We would like to consider it for our commercial app, but we need to know if this grid is supported/developed.
Currently one even can't purchase a dev license

Thanks

Is it possible to use `Grid` inside another canvas created by `react-konva`?

I see that Grid creates a canvas for itself. I would like to add a Grid inside a pre-existing react-konva canvas. Is this possible?

Add Multi media view