Hi Tasha,
Thank you very much for your reply!
I've been using these examples, but unfortunately they do not accomplish my goal.
They only produce a visual cell while editing, using any of the predefined inline editor components from the list I shared before.
What we really need are custom editors that can handle editing various types of data not covered by the current grid types.
We want to leverage the existing mechanism that takes care of autofocusing, interception, and more — this mechanism is superb, and the rest of our app relies heavily on it.
The alternative would be creating custom cells and passing configs manually, but that would require implementing all interception mechanisms for every cell type, which is cumbersome.
I have opened a PR to add this feature.
https://github.com/svar-widgets/grid/pull/59
There are two ways of using custom inline editors:
1. Registering a custom editor globally:
import { registerEditor } from "@svar-ui/svelte-grid";
registerEditor("time", TimeEditor); //where TimeEditor is the name of your custom Editor
Then consume it like any builtin editor:
{
"id": "time_column_1",
"header": "Time Column",
"sort": false,
"width": 60,
"editor": "time"
},
I suggest using this approach for editors that are widely used across the project.
2. Passing a custom editor directly via column definitions or editor resolver:
{
"id": "out1",
"header": "columns.clockings.clockcard.out1",
"sort": false,
"width": 60,
"editor": { "component": TimeEditor }
}
Or using a resolver function:
function editorHandler(config) {
return (row, col) => {
if (col.id.startsWith('in') || col.id.startsWith('out')){
return { component: TimeEditor };
}
// your code here =)
}
}
Please have a look at the PR and adjust or re-implement this feature if necessary.
Once again, thank you very much for your help.
Best regards,
Mauricio
