color palette

color palette

knight08knight08 Posts: 3Questions: 2Answers: 0

is there any possibility to add a color palette to datatable and change column colors based on that?


  • kthorngrenkthorngren Posts: 19,864Questions: 26Answers: 4,685
    edited October 2023

    Yes, its not something built into Datatables but you can custom code it. You can apply a classname or directly apply the color with something like jQuery css. Here is a simple example using classname:

    rowCallback is used to clear all applied classes or CSS then to conditionally apply the desired class or CSS. In this case a button toggles a flag. You will need to create a way to keep track of the colors from a color picker.

    Note the two CSS applied to the table. You will need both if applying classnames; one with .sorting_1 and one without so the color is applied whether the column is sorted or not:

    table#example.dataTable tbody tr td.col-blue {
      background-color: #85C1E9;
    table#example.dataTable tbody tr td.col-blue > .sorting_1 {
      background-color: #85C1E9;

    You won't need this if you choose the jQuery css option. Which I suspect you will if using a color picker. The logic will remain the same.

    The last key is to call draw() with the page parameter when the color is to be updated. The page parameter will keep from applying sorting and searching functions as it hasn't changed.


Sign In or Register to comment.