Column customization

Principles for column customization in tables.

Select columns

Animals

Cat
Dog
Sheep

Fruit

Orange
Apple

Order columns

Cat

Dog

Orange

HTML

<div class="flex justify-cfe">
  <button title="Column customization" aria-controls="column-customization" class="btn" id="column-custom-btn">
    <span data-mybicon="mybicon-columns-edit" data-mybicon-class="icon-ui mlxs"></span>
  </button>
</div>
<div class="bg-gray2 pam pb0">
  <fieldset class="flex gaxl">
    <legend>Select columns</legend>
    <div>
      <input type="checkbox" id="animals" name="animals">
      <label for="animals">Animals</label>
      <div class="nested-checkboxes mlm">
        <input type="checkbox" id="cat" name="animal" checked="checked" disabled>
        <label for="cat">Cat</label><br>
        <input type="checkbox" id="dog" name="animal" checked="checked">
        <label for="dog">Dog</label><br>
        <input type="checkbox" id="sheep" name="animal">
        <label for="sheep">Sheep</label>
      </div>
    </div>
    <div>
      <input type="checkbox" id="fruit" name="fruits">
      <label for="fruits">Fruit</label>
      <div class="nested-checkboxes mlm">
        <input type="checkbox" id="orange" name="fruit" checked="checked">
        <label for="orange">Orange</label><br>
        <input type="checkbox" id="apple" name="fruit">
        <label for="apple">Apple</label>
      </div>
    </div>
  </fieldset>
  <p class="flex fwb mtm mbs">Order columns</p>
  <div id="exampleId1" class="mb-tilesdnd owls">
    <div class="flex flex-wrap gaxs">
      <div class="tile__config relative" draggable="true">
        <div class="flex gaxs change-order-btns">
          <button class="btn-link--dark paxs" data-sort-order="0" title="Flytt Cat mot høyre">
            <span data-mybicon="mybicon-arrow-right" data-mybicon-class="icon-ui pointev-none"></span>
          </button>
        </div>
        <div class="flex align-ic pointev-none">
          Cat
        </div>
      </div>
      <div class="tile__config relative" draggable="true">
        <div class="flex gaxs change-order-btns">
          <button class="btn-link--dark paxs" data-sort-order="1" title="Flytt Dog mot venstre">
            <span data-mybicon="mybicon-arrow-left" data-mybicon-class="icon-ui pointev-none"></span>
          </button>
          <button class="btn-link--dark paxs" data-sort-order="1" title="Flytt Dog mot høyre">
            <span data-mybicon="mybicon-arrow-right" data-mybicon-class="icon-ui pointev-none"></span>
          </button>
        </div>
        <div class="flex align-ic pointev-none">
          Dog
        </div>
        <button class="btn-link--dark paxs ma0 absolute hide-btn " title="Skjul Dog">
          <span data-mybicon="mybicon-cross" data-mybicon-class="icon-ui ma0 pointev-none"></span>
        </button>
      </div>
      <div class="tile__config relative" draggable="true">
        <div class="flex gaxs change-order-btns ">
          <button class="btn-link--dark paxs" data-sort-order="2" title="Flytt Orange mot venstre">
            <span data-mybicon="mybicon-arrow-left" data-mybicon-class="icon-ui pointev-none"></span>
          </button>
        </div>
        <div class="flex align-ic pointev-none">
          Orange
        </div>
        <button class="btn-link--dark paxs ma0 absolute hide-btn" title="Skjul Orange">
          <span data-mybicon="mybicon-cross" data-mybicon-class="icon-ui ma0 pointev-none"></span>
        </button>
      </div>
    </div>
  </div>
  <div class="flex justify-csb mtm">
    <div class="flex gas">
      <button class="btn btn--white">Close</button>
      <button class="btn btn--green" type="Submit">Update</button>
    </div>
    <button class="btn btn--white" type="Reset">Reset to default</button>
  </div>
</div>

<script>
  var checkbox = document.getElementById("animals");
  checkbox.indeterminate = true;
</script>

Principles

See extended filtering documentation for how column customization button should be placed in respect to filtering.

Selecting columns

List the columns using checkboxes, allowing users to check which columns they want to be shown in their table.

Column order

We have a Tiles Drag-n-Drop React component, which can be used for the columns ordering. The component comes with ordering functionality and styling.

The users should be able to rearrange columns using arrows as well as drag and drop functionality. If a column is possible to hide, an x should be visible on the columns as in the examples. Clicking the x will also uncheck the column in the list.

Position

Position the column ordering options below the checkboxes.

Buttons

To prevent accidental changes, we recommend implementing an update button to communicate that changes happen after clicking it. If changes were to happen immediately, there should be a message letting the user know it has been updated.