How best to use third party JS library like Tabulator

[groucho86]

Question

Tabulator is an awesome interactive spreadsheet-like editor.

Not sure how to apply their Vue.js how-to for Quasar/Nicegui.

[falkoschindler]

Here's a first draft of a tabulator element:

tabulator.js:

export default {
  template: `<div ref="table"></div>`,
  props: {
    options: Object,
  },
  mounted() {
    this.tabulator = new Tabulator(this.$refs.table, this.options);
  },
};

main.py:

ui.add_head_html('''
    <link href="https://unpkg.com/tabulator-tables@5.5.0/dist/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.5.0/dist/js/tabulator.min.js"></script>
''')

class tabulator(ui.element, component='tabulator.js'):

    def __init__(self, options: dict) -> None:
        super().__init__()
        self._props['options'] = options

tabulator({
    'height': 205,
    'data': [
        {'id': 1, 'name': "Oli Bob", 'age': "12", 'col': "red", 'dob': ""},
        {'id': 2, 'name': "Mary May", 'age': "1", 'col': "blue", 'dob': "14/05/1982"},
        {'id': 3, 'name': "Christine Lobowski", 'age': "42", 'col': "green", 'dob': "22/05/1982"},
        {'id': 4, 'name': "Brendon Philips", 'age': "125", 'col': "orange", 'dob': "01/08/1980"},
        {'id': 5, 'name': "Margret Marmajuke", 'age': "16", 'col': "yellow", 'dob': "31/01/1999"},
    ],
    'layout': "fitColumns",
    'columns': [
        {'title': "Name", 'field': "name", 'width': 150},
        {'title': "Age", 'field': "age", 'hozAlign': "left", 'formatter': "progress"},
        {'title': "Favourite Color", 'field': "col"},
        {'title': "Date Of Birth", 'field': "dob", 'sorter': "date", 'hozAlign': "center"},
    ],
})

Maybe this can serve as a starting point for developing a tabulator element. Make sure to have a look into NiceGUI's other "custom" elements, i.e. *.js and *.vue files in https://github.com/zauberzeug/nicegui/tree/main/nicegui/elements, as well as the custom Vue component example.

[sx98083714]

@falkoschindler Thanks for the example you gave, which is very simple and powerful. tabulator table can be displayed normally through your example, and can pass many parameters to tabulator through options to achieve many powerful functions, which is already very good. The only drawback is that you cannot call the built-in functions and methods of tabulator. If you add this function to it, it will be perfect. If you have time, can you make up for it for us? Thank you very much! Wish you a happy life!

[groucho86]

Thanks @falkoschindler ! I'm making decent progress.

Slightly shameful question (aren't they all?): I've downloaded the Tabulator js and css in the same folder as my main.py. I'm unable to successfully reference them via add_head_html. Do I need to register them? Or add them to the vue-js file?

[falkoschindler]

That's no shameful question at all!
You need to serve these files using something like app.add_static_files. Otherwise the client would be requesting files the server doesn't know about.

In case of custom components that depend on third-party JavaScript libraries, you can pass their relative path to the class definition like this:

nicegui/nicegui/elements/joystick.py

Line 7 in b88181f

class Joystick(Element, component='joystick.vue', libraries=['lib/nipplejs/nipplejs.js']):

But currently this doesn't work for CSS files. So head HTML is the place to go I guess.

[matkuki]

Hey @groucho86
Any progress on the Tabulator integration? Could it be published as a github gist?

I will do myself from scratch if it's not in a releasable state, but I don't want do repeat something that's already done. Thanks

[groucho86]

Hi @matkuki, I sort of created some abomination that fit my own needs, but have beem struggling on how to make it... as programmable as possible.

Here are the elements:

class Tabulator(Element, component='tabulator_vue.js', libraries=['tabulator.js']):
       
    def __init__(self, columns=None, data=None ) -> None:
        super().__init__()
        jrdebug_pass(type(data), False)
        jrdebug_pass(data)
  
        self.data = {}
        self._props['columns'] = columns if columns is not None else []
        self._props['data'] = data
            
    def set_data(self, data) -> None:
        self.data = data
        self.run_method('set_data', data)
    
    def set_columns(self, columns) -> None:
        self.run_method('set_columns', columns)

tabulator_vue.js :

export default {
    template: '<div ref="table"></div>',

    data() {
        return {
            tabulator: null, //variable to hold your table
            tableData: this.data, //data for table to display
            tableColumns: this.columns,
        }
    },


beforeMount() {

// if this.propColumns

},

    mounted() {

        var OtherCellContextMenu = [{
                label: "Copy cell to all rows",
                action: function(e, cell) {
                    let tempData = cell.getValue();
                    var rows = table.getRows();
                    for (var i = 0, len = rows.length; i < len; i++) {
                        rows[i].getCell(cell.getField()).setValue(tempData);
                    }

                }
            },


            {
                label: "Copy cell to selected row(s)",
                action: function(e, cell) {
                    let tempData = cell.getValue();
                    var rows = table.getSelectedRows();
                    for (var i = 0, len = rows.length; i < len; i++) {
                        rows[i].getCell(cell.getField()).setValue(tempData);
                    }


                }
            }


        ]

            if (   (Array.isArray(this.tableColumns) && this.tableColumns.length)   ) {
            var autoColumns = false;
            var importFormat = 'array';   
            }
            else {
            var autoColumns = true;
            var importFormat = "array";
  

                   }

        //instantiate Tabulator when element is mounted
        this.tabulator = new Tabulator(this.$refs.table, {
            data: this.tableData, //link data to table
            reactiveData: true,
            maxHeight: "100%",
            persistence: {
                column: true
            },
            persistenceMode: "cookie",
            layout: "fitColumns",

            columnDefaults: {
                titleFormatter: "textarea",
                contextMenu: OtherCellContextMenu,
                editor: "input",
                editorParams: {
                    allowEmpty: true,
                    listOnEmpty: true,
                    values: false,
                    selectContents: true
                },
            },
            columns: this.tableColumns,
            autoColumns: autoColumns,
            importFormat: importFormat,
            

        });


    },

    methods: {
        set_data(data) {
            this.tabulator.setData(data);
            this.tabulator.redraw(true);
        },
        add_row(data={}) {
           this.tabulator.addRow(data);

        },
        set_columns(columns) {
            this.tabulator.setColumns( [{
                    title: "Notes",
                    field: "notes",
                    width: 150
                }]);
            this.tabulator.redraw(true);
        },
        

    },
    
    props: {
        columns: Array,
        data: Array,
    }

}

elements needed to make it work in main.py:

        ui.add_head_html('<link href="tabulator.css" rel="stylesheet">')
        ui.add_head_html('<script type="text/javascript" src="tabulator.js"></script>')

[zbxiany]

I hope the official can integrate this powerful table

[sx98083714]

A great Chinese developer has developed the NiceGUi-Tabulator module, hoping that tabulator can flourish under the nicegui module!

[sx98083714]

https://pypi.org/project/nicegui-tabulator/
I forgot to put the address, I hope it helps someone in need!

[falkoschindler]

Oh wow, very nice! 🤩
Here's the repo: https://github.com/CrystalWindSnake/nicegui-tabulator
Like ex4nicegui, this is yet another great contribution to the NiceGUI ecosystem from CrystalWindSnake. 🚀

[rodja]

Awesome! I added both libs to our wiki: https://github.com/zauberzeug/nicegui/wiki