How could one use a Vue component inside of a cell?

For example, I'd like to put an element-ui button in there for edit/delete/etc. I'd need be able to handle the click event. I'd also like to use a datepicker component.

This does not seem obvious to me using the cell renderer.

Thanks for all the hard work on this great component!

Why was the mouse selection range feature removed in later versions?

I see that https://github.com/revolist/revogrid/commit/40de4843301082d9fe90b5788c414a76a525069e is the last version that supports mouse selection range (online demo), what is the problem that abandoned this feature?

Is there any plan to support it in the future?

Hi, some basic customization features which I think are lacking:

1. ability to disable edit on columns definition
2. removing sort after a table has been sorted (third consecutive click could remove the table sort)

on a separate note: I've noticed the grid is not ignoring keyboard shortcuts when having a cell selected. example: select a cell and do cmd+L to edit the url on the page, notice that the cell value changes.

I'm happy to try to help you improve this if you can give me some pointers.

As far as I am concern, row headers only display numbers and are not customizable, am I right?

Let's say in your example here https://revolist.github.io/revogrid/ you want name to be a row header so that's not selectable, is that possible?

Hi, I am using vue framework and like to pass user props to a vue cell template.

tableColumns: [{ name: "Actions", prop: "amsRecid", cellTemplate: VGridVueTemplate(CellActions) }]

Is there any possibility like

userProps: {userProp1: 'Test 1', userProp2: 'Test 2'} cellTemplate: VGridVueTemplate(CellActions, userProps) ?

And then inside cell template:

... props: ["rowIndex", "prop", "userProp1", "userProp2", ...], ...

As can be seen from the demo (https://revolist.github.io/revogrid/demo/), when the cell contents is changed and without clicking enter, click with the mouse on another cell, the inputted value is not saved. How do i save the value when focus from cell is lost without pressing the enter key ?

My project needs to make each column expand evenly. Just like element-plus's table I tried it myself, because I use vue, so I wrapped a component and listened to the change of columns to calculate the size of the columns that are not set to size, while in the resize event, through the plugin to get the dimensionProvider to update the size of columns. But the current plugin interface does not provide dimensionProvider, so I used patch-package to modify the source code. I think it might be possible to enhance the current stretchPlugin or change the plugin's interface.

Describe the issue With :row-headers="true" you can see that row headers are active but the labels on it are not visible. The problem is probably a conflict with boostrap.css.

To Reproduce Check here https://codesandbox.io/s/quirky-dan-ruyv0?file=/src/App.vue Try to remove line 16: import "bootstrap/dist/css/bootstrap.css"; You should see the labels appearing when deleting the import, but it should not conflict with bootstrap css.

Is there a way to get an active or focused cell or row (data)? Want to implement custom keyboard shortcuts when e.g. enter is pressed on a cell, but didn't find any APIs to pull it off.

Describe the issue Hi, I'm trying to use revogrid to display 1 million+ records, i have a working API that can serve "pages" of rows (array of objects) using filters, sorts and offsets. Can this library get data and still use filters and sorts on that data if the data is remote? Or how would you display this data in revogrid, because downloading it all would take about 1-2 minutes..

Thanks

In Excel and other spreadsheet programs, including web-based such as google spreadsheet or handsontable tool - You click and drag to select multiple cells.

Selecting multiple cells is possible already, by selecting a cell, holding shift, and selecting the finish cell. It is just about implementing the intuitive drag functionality.

I might implement it myself if I'll find time on some weekend, but anyway it is here to document the feature.

I'm rendering custom components for my cells, and I want to be able to access the instance of a custom component given row,col position.

Is the structure of the code ready to achieve this? If not, any clues on how to do it?

in angular the afteredit event when called to get the details shows me twice the same detail.

This is the code

App component HTML

<revo-grid [source]="rows" [columns]="columns" theme="material" (afteredit)="onAfterEdit($event)">

App Component Typescript

onAfterEdit({ detail }) { console.log(detail) } }

Describe the issue The API documentation lists an event beforefocuslost (https://revolist.github.io/revogrid/guide/api.html#events) that fires before cell focus is lost. I also see this event in the code in custom-element/revo-grid.js. However, this event never fires for some reason. I was able to reproduce this both with React and Svelte, so the issue has to be in the root repo.

To Reproduce Each of these examples implements 2 events, Svelte implements beforeEdit (to use as control group to show that I'm using events correctly) and beforeFocusLost (to show that this event does not fire). The React example, similarly, implements afterEdit and beforeFocusLost. In both cases, the beforeEdit/afterEdit events DO fire, while beforeFocusLost does not.

Svelte example: https://codesandbox.io/s/revogrid-svelte-legacy-forked-h101lq React example: https://codesandbox.io/s/bold-hill-cchvlf

I'd like to realize a trigger event when the last row of a grid is in focus. This is to add infinite scroll via my api. I researched in the docs but could not find a proper method. Only viewportscroll seemed appropriate. Is there any way to discover then the last row of the grid comes into the user's viewport?

Thanks

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.