Search code examples
jquerycssbackground-colortabulatortabulator-py

How to change background color in tabulator for specific column(s)?

Please HELP! I am new for coding and Tabulator.

I want to change column's background color in Tabulator.

  1. NOT for all columns, is for specific column.
  2. Not for Header,just for column body.
  3. If there is a way to change specific columns background colorin one line code would be very nice!

I found that some method on Tabulators website

    {title:"Example", field:"example", formatter:"color"}

I know it is used to column building but I don't understand where should i fill in my color-code like #fcfcfc、blue or something like that.

Can anyone help me?Thanks!

I

Solution

  • I've never used jQuery tabulator before but by referring to the manual here I managed to get it working the way you want (at least I hope so), here is the code

    <!DOCTYPE html>
<html>
<head>
  <title>Tabulator Table</title>
  <meta charset="utf-8">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.2.7/css/bootstrap/tabulator_bootstrap4.min.css">

  <link href="https://unpkg.com/tabulator-tables@4.2.7/dist/css/tabulator.min.css" rel="stylesheet">

  <!-- scripts -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.2.7/js/tabulator.min.js" type="text/javascript"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js" type="text/javascript"></script>

  <script type="text/javascript">
    /* Create data */
    $(document).ready(function() {
      // Build Table
      var tab_table = new Tabulator("#data-container", {
        layout: "fitColumns",
        selectable: true,
        height: "auto",
        width: "auto",
        rowSelected: function(row) {
          $(row.getElement()).css({
            borderWidth: '3px',
            borderColor: 'red'
          });
        },

        rowDeselected: function(row) {
          $(row.getElement()).css({
            borderWidth: '',
            borderColor: ''
          });
        },

        columns: [{
            title: "First Name",
            field: "first_name",
            width: 200
          },
          {
            title: "Last Name",
            field: "last_name",
            width: 200
          },
          {
            title: "Email",
            field: "email",
            width: 200
          },
          {
            title: "Phone",
            field: "phone",
            width: 200
          },
        ],
        data: [{
            id: 1,
            first_name: "Bugs",
            last_name: "Bunny",
            email: "bugsbunny@wb.com",
            phone: "(555) 555-1212"
          },
          {
            id: 2,
            first_name: "Yosemite",
            last_name: "Sam",
            email: "yosemite@wb.com",
            phone: "(555) 555-2323"
          },
          {
            id: 3,
            first_name: "Daffy",
            last_name: "Duck",
            email: "daffyduck@wb.com",
            phone: "(555) 555-3434"
          },
          {
            id: 4,
            first_name: "Wile E.",
            last_name: "Coyote",
            email: "wile.e.coyote@wb.com",
            phone: "(555) 555-4545"
          },
          {
            id: 5,
            first_name: "Elmer",
            last_name: "Fudd",
            email: "elmer@wb.com",
            phone: "(555) 555-5656"
          },
        ],

      });
      $('.jscolor').focusout(function() {
        $('.tabulator-selected').css({
          borderWidth: '',
          borderColor: ''
        });
        $('.tabulator-selected').removeClass('tabulator-selected');
        $('.jscolor').html('Click here to pick a color');
      });
      $('.jscolor').html('Click here to pick a color');

    });
  </script>
</head>
<body>
  <div class="container">
    <div id="table-buttons">
      <input class="form-control" type="text" id="numColumns" value="1" />
      <button class="btn btn-primary" id="btnAddColumns">Add Columns</button>
      <button class="btn btn-primary" id="btnRemoveColumn">Remove Column</button>
      <button class="jscolor
    {onFineChange:'update(this)', closable:true, closeText:'Close me!'}">
                Click here to pick a color
            </button>
      <script type="text/javascript">
        function update(picker) {
          var color = picker.valueElement.innerHTML;
          $('.tabulator-selected').css('backgroundColor', '#' + color);
        }
      </script>
    </div>
    <div id="data-container" class="table-responsive">
    </div>
  </div>
</body>
</html>

    Feel free to modify it at your own convenience, hope that helps.