rowsncolumns / grid Goto Github PK
View Code? Open in Web Editor NEWDeclarative React Canvas Grid primitive for Data table, Pivot table and more :boom:
Home Page: https://rowsncolumns.app
Declarative React Canvas Grid primitive for Data table, Pivot table and more :boom:
Home Page: https://rowsncolumns.app
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?
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?
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?
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
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.
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>
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!
https://github.com/rowsncolumns/grid/tree/master/examples/excel-worksheet
In the README is missing
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?
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?
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);
}, []);
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
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
)
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
Hi good day! this project looks amazing cheers!!!
I have some questions:
=A1*MY_OWN_VARIABLE
=$B$this * .8
or even better =$price * .8
(where $price is an alias for column B)<button></button>, <img />, <a></a>
in custom cell rendered?thank you
good day!
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.