Comments (6)
Can you show me your code?
from glide-data-grid.
Sure. I was trying to get a feel for things by following the example code in the repo.
Main body looks as follows:
<body>
...
<div id="portal" />
</body
I have set the columns as follows:
const columns: GridColumn[] = [
{ title: 'Number', width: 100 },
{ title: 'Square', width: 100 },
]
defined the data editor container:
<DataEditorContainer width={500} height={300}>
<DataEditor
getCellContent={getData}
columns={columns}
rows={1000}
/>
</DataEditorContainer>
and the getData
function:
function getData([col, row]: readonly [
number,
number
]): EditableGridCell {
let n: number
if (col === 0) {
n = row
} else if (col === 1) {
n = row * row
} else {
throw new Error('This should not happen')
}
return {
kind: GridCellKind.Number,
data: n,
displayData: n.toString(),
allowOverlay: false,
}
}
I am able to select cells fine, but the <input>
elements do not appear. When changing allowOverlay
to true
I am able to edit in the overlay input box but the value in the cell does not change.
from glide-data-grid.
Oh okay yes, sorry I thought your question was something else.
Set allowOverlay
to true for cells you want to be editable. Then hook up the onCellEdited callback in your DataEditor and make sure your cells content gets updated correctly.
from glide-data-grid.
Great thank you for the clarification.
Should the overlay be placed directly over the cell being edited by default? I am seeing behavior where it opens a few cells above such as in #17 (but on desktop). I do not see this behavior on desktop when using the demo.
from glide-data-grid.
Can you check and make sure your portal is positioned at 0,0? Maybe the portal is somehow being offset?
from glide-data-grid.
Also just a working example I could look at would be very helpful
from glide-data-grid.
Related Issues (20)
- Fill for columns and rows, like on the landing page example HOT 2
- any real example of grid connected to api rest to show 1M results or directyl to sql db? HOT 4
- How to implement SparklineCell? HOT 1
- Feature Request: SubRow Functionality HOT 1
- Modifying values with onClick HOT 1
- Don't trigger `onItemHovered` if column is being resized
- Allow configuring a URI link color only for cell rendering HOT 1
- Prevent selection of non-sticky trailing row
- @glideapps/glide-data-grid-cells not exporting useExtraCells HOT 3
- The fill handler border is sometimes not shown HOT 1
- Multiple row selection with a mouse click HOT 3
- useCustomCells removed in v6? HOT 4
- Errors after update: 'useExtraCells' and 'useCustomCells' not found HOT 2
- Focus ring is broken in the first colum HOT 1
- Don't select cells if click is consumed by the cell itself
- Feature request: Make editor activation customizable HOT 1
- Copying cells containing double quote adds more double quotes HOT 2
- Feature request: add onSelectAllClicked trigger HOT 4
- Custom cell implementation in docs HOT 2
- Customising standard cell types
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from glide-data-grid.