Color Picker for columns, rows, and individual cells

[BFrancoeur]

I have a use case were a client needs to be able to change the colors of table elements in the front end. I am trying different ways, but haven't had any luck getting anything to work. Currently, I am working with jsColor to try and add this feature.

Thanks!

[olifolkerd]

Hey @BFrancoeur

There is no built in colour picker with Tabulator because there are so many different appraoches to acheive this and so many great pickers out there at the moment.

Your best approach would be to use a Custom Formatter for the cells and the Row Formatter for the rows.

If you need to pick a colour inside a specific cell then you should look at creating a Custom Editor

That will let you set the backgrounds directly on all the table elements.

I hope that helps,

Cheers

Oli

[thierryVergult]

Managed to integrate the coloris color picker via a custom editor

var colorEditor = function( cell, onRendered, success, cancel, editorParams) {

        //cell - the cell component for the editable cell
        //onRendered - function to call when the editor has been rendered
        //success - function to call to pass thesuccessfully updated value to Tabulator
        //cancel - function to call to abort the edit and return to a normal cell
        //editorParams - params object passed into the editorParams column definition property

        console.log('coloris edit, in cell with value', cell.getValue());

        //create and style editor
        var editor = document.createElement("input");
        editor.dataset.coloris = '';
        editor.value = cell.getValue();

        onRendered(function(){
          editor.click();
        });

        //when the value has been set, trigger the cell to update
        function successFunc(){
          console.log('color edit, success with value ' + editor.value);
          success( editor.value);
        }

        editor.addEventListener("change", successFunc);
        editor.addEventListener("blur", successFunc);

        return editor;

      };