Add some custom behaviours color based on parameter values style body min height 400px style script src https cdnjs cloudflare com ajax libs tabulator 5 4 4 js tabulator min js script link href https cdnjs cloudflare com ajax libs tabulator 5 4 4 css tabulator min css rel stylesheet div id example table div script var progressFormatter function cell formatterParams progress bar var value this sanitizeHTML cell getValue 0 var element cell getElement var color 222222ff if value 40 color ff0000ff else if value 50 color 00ff00ff else color 0000ffff console log element element typeof element element style min width 30px element style position relative element setAttribute aria label value value 100 value return div style position absolute top 5px bottom 5px left 4px right value margin right 4px background color color display inline block div var table new Tabulator example table data tabledata load row data from array layout fitColumns fit columns to width of table responsiveLayout hide hide columns that dont fit on the table addRowPos top when adding a new row add it to the top of the table history true allow undo and redo actions on the table pagination local paginate the data paginationSize 7 allow 7 rows per page of data paginationCounter rows display count of paginated rows in footer movableColumns true allow column order to be changed initialSort set the initial sort order of the data column name dir asc columnDefaults tooltip true show tool tips on cells columns define the table columns title Name field name width 150 formatter function cell formatterParams var value cell getValue if value indexOf o 0 return span style color 3FB449 font weight bold value span else return value title progress width 100 field progress align left formatter progressFormatter title Gender field gender width 95 editor select editorParams values male female title Rating field rating formatter star hozAlign center width 100 editor true title Color field col width 130 editor input title Date Of Birth field dob width 130 sorter date hozAlign center title Driver field car width 90 hozAlign center formatter tickCross sorter boolean editor true let f if Math random 0 5 table addRow name Bob progress 20 else if Math random 0 5 table addRow name John progress 45 else table addRow name Kevin progress 60 onclick f setTimeout f f 100 script style body min height 400px style script src https cdnjs cloudflare com ajax libs tabulator 5 4 4 js tabulator min js script link href https cdnjs cloudflare com ajax libs tabulator 5 4 4 css tabulator min css rel stylesheet div input id filter value type text placeholder value to filter button id filter clear Clear Filter button div div id example table div script Define variables for input elements var valueEl document getElementById filter value Custom filter example function customFilter data return data car data rating 3 Trigger setFilter function with correct parameters function updateFilter table setFilter name keywords valueEl value matchAll false Update filters on value change document getElementById filter value addEventListener keyup updateFilter Clear filters on Clear Filters button click document getElementById filter clear addEventListener click function valueEl value table clearFilter var progressFormatter function cell formatterParams progress bar var value this sanitizeHTML cell getValue 0 var element cell getElement var color 222222ff if value 40 color ff0000ff else if value 50 color 00ff00ff else color 0000ffff console log element element typeof element element style min width 30px element style position relative element setAttribute aria label value value 100 value return div style position absolute top 5px bottom 5px left 4px right value margin right 4px background color color display inline block div var table new Tabulator example table data tabledata load row data from array layout fitColumns fit columns to width of table responsiveLayout hide hide columns that dont fit on the table addRowPos top when adding a new row add it to the top of the table history true allow undo and redo actions on the table pagination local paginate the data paginationSize 7 allow 7 rows per page of data paginationCounter rows display count of paginated rows in footer movableColumns true allow column order to be changed initialSort set the initial sort order of the data column name dir asc columnDefaults tooltip true show tool tips on cells columns define the table columns title Name field name width 150 formatter function cell formatterParams var value cell getValue if value indexOf o 0 return span style color 3FB449 font weight bold value span else return value title progress width 100 field progress align left formatter progressFormatter title Gender field gender width 95 editor select editorParams values male female title Rating field rating formatter star hozAlign center width 100 editor true title Color field col width 130 editor input title Date Of Birth field dob width 130 sorter date hozAlign center title Driver field car width 90 hozAlign center formatter tickCross sorter boolean editor true let f if Math random 0 5 table addRow name Bob progress 20 else if Math random 0 5 table addRow name John progress 45 else table addRow name Kevin progress 60 onclick f setTimeout f f 100 script style body min height 400px style script src https cdnjs cloudflare com ajax libs tabulator 5 4 4 js tabulator min js script link href https cdnjs cloudflare com ajax libs tabulator 5 4 4 css tabulator min css rel stylesheet div id example table div script var progressFormatter function cell formatterParams progress bar var value this sanitizeHTML cell getValue 0 var element cell getElement var color 222222ff if value 40 color ff0000ff else if value 50 color 00ff00ff else color 0000ffff console log element element typeof element element style min width 30px element style position relative element setAttribute aria label value value 100 value return div style position absolute top 5px bottom 5px left 4px right value margin right 4px background color color display inline block div var table new Tabulator example table data tabledata load row data from array layout fitColumns fit columns to width of table responsiveLayout hide hide columns that dont fit on the table addRowPos top when adding a new row add it to the top of the table history true allow undo and redo actions on the table pagination local paginate the data paginationSize 7 allow 7 rows per page of data paginationCounter rows display count of paginated rows in footer movableColumns true allow column order to be changed initialSort set the initial sort order of the data column name dir asc columnDefaults tooltip true show tool tips on cells columns define the table columns title Name field name width 150 formatter function cell formatterParams var value cell getValue if value indexOf o 0 return span style color 3FB449 font weight bold value span else return value headerFilter input title progress width 100 field progress align left formatter progressFormatter title Gender field gender width 95 editor select editorParams values male female title Rating field rating formatter star hozAlign center width 100 editor true title Color field col width 130 editor input title Date Of Birth field dob width 130 sorter date hozAlign center title Driver field car width 90 hozAlign center formatter tickCross sorter boolean editor true let f if Math random 0 5 table addRow name Bob progress 20 else if Math random 0 5 table addRow name John progress 45 else table addRow name Kevin progress 60 onclick f setTimeout f f 100 script
ponsiveLayout hide hide columns that dont fit on the table addRowPos top when adding a new row add it to the top of the table history true allow undo and redo actions on the table pagination local paginate the data paginationSize 7 allow 7 rows per page of data paginationCounter rows display count of paginated rows in footer movableColumns true allow column order to be changed initialSort set the initial sort order of the data column name dir asc columnDefaults tooltip true show tool tips on cells columns define the table columns title Name field name width 150 formatter function cell formatterParams var value cell getValue if value indexOf o 0 return span style color 3FB449 font weight bold value span else return value title progress width 100 field progress align left formatter progressFormatter title Gender field gender width 95 editor select editorParams values male female title Rating field rating formatter star hozAlign center width 100 editor true title Color field col width 130 editor input title Date Of Birth field dob width 130 sorter date hozAlign center title Driver field car width 90 hozAlign center formatter tickCross sorter boolean editor true let f if Math random 0 5 table addRow name Bob progress 20 else if Math random 0 5 table addRow name John progress 45 else table addRow name Kevin progress 60 onclick f setTimeout f f 100 script style body min height 400px style script src https cdnjs cloudflare com ajax libs tabulator 5 4 4 js tabulator min js script link href https cdnjs cloudflare com ajax libs tabulator 5 4 4 css tabulator min css rel stylesheet div id example table div script var progressFormatter function cell formatterParams progress bar var value this sanitizeHTML cell getValue 0 var element cell getElement var color 222222ff if value 40 color ff0000ff else if value 50 color 00ff00ff else color 0000ffff console log element element typeof element element style min width 30px element style position relative element setAttribute aria label value value 100 value return div style position absolute top 5px bottom 5px left 4px right value margin right 4px background color color display inline block div var table new Tabulator example table data tabledata load row data from array layout fitColumns fit columns to width of table responsiveLayout hide hide columns that dont fit on the table addRowPos top when adding a new row add it to the top of the table history true allow undo and redo actions on the table pagination local paginate the data paginationSize 7 allow 7 rows per page of data paginationCounter rows display count of paginated rows in footer movableColumns true allow column order to be changed initialSort set the initial sort order of the data column name dir asc columnDefaults tooltip true show tool tips on cells columns define the table columns title Name field name width 150 formatter function cell formatterParams var value cell getValue if value indexOf o 0 return span style color 3FB449 font weight bold value span else return value headerFilter input title progress width 100 field progress align left formatter progressFormatter title Gender field gender width 95 editor select editorParams values male female title Rating field rating formatter star hozAlign center width 100 editor true title Color field col width 130 editor input title Date Of Birth field dob width 130 sorter date hozAlign center title Driver field car width 90 hozAlign center formatter tickCross sorter boolean editor true let f if Math random 0 5 table addRow name Bob progress 20 else if Math random 0 5 table addRow name John progress 45 else table addRow name Kevin progress 60 onclick f setTimeout f f 100 script