Table

To allow users to scan a set of information easily.

Anatomy

Checkbox
Label
Sorting indicator
Value
Action menu

Example

Coded example

Merchant ID	Reseller key	Company name	Transactions	Sales Vol.	Returns Vol.	Ineligible	Reseller	Actions
1123222	1123222	Bedrock incorporated	24	$56.40	$0.00	$0.00	Integrity	Edit Delete
112223	112223	Bedrock incorporated	12	$56.40	$0.00	$0.00	Integrity	Edit Delete
112232	112232	Bedrock incorporated	4	$56.40	$0.00	$0.00	Integrity	Edit Delete
1112344	1112344	Bedrock incorporated	4	$56.40	$0.00	$0.00	Integrity	Edit Delete

Code snippet

									
<div class="table-responsive">
  <table class="table table-striped">
    <thead>
      <tr>
        <th class="select-row">
          <div class="checkbox table-checkbox">
            <label class="block-label selection-button-checkbox">
              <input type="checkbox" name="all" value="all" id="toggleAll" tabindex="0">
            </label>
          </div>
        </th>
        <th scope="col">Merchant ID</th>
        <th scope="col">Reseller key</th>
        <th scope="col">Company name</th>
        <th scope="col" class="text-right">Transactions</th>
        <th scope="col" class="text-right">Sales Vol.</th>
        <th scope="col" class="text-right">Returns Vol.</th>
        <th scope="col" class="text-right">Ineligible</th>
        <th scope="col">Reseller</th>
        <th scope="col" class="text-center">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="select-row">
          <div class="checkbox table-checkbox">
            <label class="block-label selection-button-checkbox row-select">
            <input type="checkbox" name="ck1" value="ck1"></label>
          </div>
        </td>
        <td scope="row">1123222</td>
        <td>1123222</td>
        <td><a href="">Bedrock incorporated</a></td>
        <td class="text-right">24</td>
        <td class="text-right">$56.40</td>
        <td class="text-right">$0.00</td>
        <td class="text-right">$0.00</td>
        <td>Integrity</td>
        <td class="text-center">
          <div class="dropdown">
            <a class="dropdown-toggle actions-button" type="button" id="dropdownMenuButton" data-toggle="dropdown" data-boundary="viewport" aria-haspopup="true" aria-expanded="false">
              <i class="fa-solid fa-ellipsis"></i>
            </a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#">Edit</a>
              <a class="dropdown-item danger" href="#">Delete</a>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="select-row">
          <div class="checkbox table-checkbox">
            <label class="block-label selection-button-checkbox row-select">
            <input type="checkbox" name="ck2" value="ck2"></label>
          </div>
        </td>
        <td scope="row">112223</td>
        <td>112223</td>
        <td><a href="">Bedrock incorporated</a></td>
        <td class="text-right">12</td>
        <td class="text-right">$56.40</td>
        <td class="text-right">$0.00</td>
        <td class="text-right">$0.00</td>
        <td>Integrity</td>
        <td class="text-center">
          <div class="dropdown">
            <a class="dropdown-toggle actions-button" type="button" id="dropdownMenuButton" data-toggle="dropdown" data-boundary="viewport" aria-haspopup="true" aria-expanded="false">
              <i class="fa-solid fa-ellipsis"></i>
            </a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#">Edit</a>
              <a class="dropdown-item danger" href="#">Delete</a>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="select-row">
          <div class="checkbox table-checkbox">
            <label class="block-label selection-button-checkbox row-select">
            <input type="checkbox" name="ck3" value="ck3"></label>
          </div>
        </td>
        <td scope="row">112232</td>
        <td>112232</td>
        <td><a href="">Bedrock incorporated</a></td>
        <td class="text-right">4</td>
        <td class="text-right">$56.40</td>
        <td class="text-right">$0.00</td>
        <td class="text-right">$0.00</td>
        <td>Integrity</td>
        <td class="text-center">
          <div class="dropdown">
            <a class="dropdown-toggle actions-button" type="button" id="dropdownMenuButton" data-toggle="dropdown" data-boundary="viewport" aria-haspopup="true" aria-expanded="false">
              <i class="fa-solid fa-ellipsis"></i>
            </a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#">Edit</a>
              <a class="dropdown-item danger" href="#">Delete</a>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="select-row">
          <div class="checkbox table-checkbox">
            <label class="block-label selection-button-checkbox row-select">
            <input type="checkbox" name="ck4" value="ck4"></label>
          </div>
        </td>
        <td scope="row">1112344</td>
        <td>1112344</td>
        <td><a href="">Bedrock incorporated</a></td>
        <td class="text-right">4</td>
        <td class="text-right">$56.40</td>
        <td class="text-right">$0.00</td>
        <td class="text-right">$0.00</td>
        <td>Integrity</td>
        <td class="text-center">
          <div class="dropdown">
            <a class="dropdown-toggle actions-button" type="button" id="dropdownMenuButton" data-toggle="dropdown" data-boundary="viewport" aria-haspopup="true" aria-expanded="false">
              <i class="fa-solid fa-ellipsis"></i>
            </a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#">Edit</a>
              <a class="dropdown-item danger" href="#">Delete</a>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

									
$(function () {
$("body").addClass("js-enabled");
$("thead input[type=checkbox]").focus(function () {
  $(this).closest(".block-label").addClass("focused");
        })
        $("thead input[type=checkbox]").focusout(function () {
            $(this).closest(".block-label").removeClass("focused");
        })
        $("input[type=checkbox]").focus(function () {
            $(this).closest("tr").addClass("focused");
        })
        $("input[type=checkbox]").blur(function () {
                $(this).closest("tr").removeClass("focused");
            })
            /* Checkbox, set classes to apply styles */
        $("input[type=checkbox]").click(function () {
            if ($(this).closest("tr").hasClass("head")) return;
            if ($(this).is(":checked")) {
                $(this).closest("tr").addClass("row-selected");
                $(this).closest(".selection-button-checkbox").addClass('selected');
            }
            else {
                $(this).closest("tr").removeClass("row-selected");
                $(this).closest(".selection-button-checkbox").removeClass('selected');
            }
        });
        $("#toggleAll").click(function () {
            if ($(this).hasClass("all-selected")) {
                $(this).removeClass("all-selected");
                $("input[type=checkbox]").each(function () {
                    $(this).closest(".selection-button-checkbox").removeClass('selected');
                    $(this).closest("tr").removeClass("row-selected");
                    $(this).attr("checked", false);
                })
            }
            else {
                $(this).addClass("all-selected");
                $("input[type=checkbox]").each(function () {
                    $(this).closest(".selection-button-checkbox").addClass('selected');
                    if ($(this).attr("id") != "toggleAll") $(this).closest("tr").addClass("row-selected");
                    $(this).attr("checked", true);
                })
            }
        })
        $(".row-select tbody tr .select-row").click(function (e) {
            selectRowChange($(this));
        })
        $("input[type=checkbox]").keyup(function (e) {
            if (e.which == 13) boxPressed($(this));
        })

        function selectRowChange(row) {
            if (row.find("select").is(":focus")) return;
            if (row.hasClass("row-selected")) {
                row.removeClass("row-selected");
                row.find("input[type=checkbox]").first().attr("checked", false);
                row.find(".selection-button-checkbox").first().removeClass("selected");
            }
            else {
                row.addClass("row-selected");
                row.find("input[type=checkbox]").first().attr("checked", true);
                row.find(".selection-button-checkbox").first().addClass("selected");
            }
        }

        function boxPressed(cbox) {
            if (cbox.closest("select").is(":focus")) return;
            if (cbox.closest("tr").hasClass("row-selected")) {
                cbox.closest("tr").removeClass("row-selected");
                cbox.attr("checked", false);
                cbox.closest("label").removeClass("selected");
            }
            else {
                cbox.closest("tr").addClass("row-selected");
                cbox.attr("checked", true);
                cbox.closest("label").addClass("selected");
            }
        }
})

Figma prototype

Usage guide

Content alignment

Content type	Alignment
Text	Left
IDs (both numerical and mixed)	Left
Dates	Left
Links	Left
Numerical/Monetary	Right
Actions	Center
Checkboxes	Center
Icons (when used on their own)	Center

Dos and don'ts

To compare information which a user can scan from left to right.

Every table should have a header to let a user see what information they are looking at.

Some data such as financial information should be right aligned in cells.

Don’t use a table to layout a page for example text with an image. Use the layout options.

Over crowd the table with rows.

Add data that might not be suitable to a table.