Data table

Data tables are used to present data sets in a simple and organized way. Unlike standard HTML Table, it is responsive and compatible with all the screen sizes.

Examples

Complex

Create reusable Vue components based on your needs and use them as custom templates for Data Table cells and row accordions
<!-- Vue component -->
<ChiDataTable :config="config" :data="table" ref="dataTableComplex">
  <template #status="payload">
    <i class="`chi-icon icon-${payload.icon} -icon--${payload.color}`" aria-hidden="true"></i>
    <span class="-text--truncate" style="padding-left: 0.5rem;">
      {{ payload.status }}
    </span>
  </template>
  <template #name="payload">
    <ExamplePopover :name="payload.name" :id="payload.id" />
  </template>
  <template #actions="payload">
    <ExampleDropdown :id="payload.id" />
  </template>
  <template #toolbar>
    <ChiToolbar>
      <template v-slot:start></template>
      <template v-slot:end>
        <chi-button @chiClick="printTable" variant="flat" type="icon" aria-label="Print data table complex example">
          <chi-icon icon="print"></chi-icon>
        </chi-button>
      </template>
    </ChiToolbar>
  </template>
  <template #bulkActions>
    <div class="chi-bulk-actions__buttons">
      <div class="chi-bulk-actions__buttons-mobile -z--40">
        <chi-button variant="flat" type="icon" aria-label="Edit">
          <chi-icon icon="edit"></chi-icon>
        </chi-button>
        <chi-button variant="flat" type="icon" aria-label="Compose">
          <chi-icon icon="compose"></chi-icon>
        </chi-button>
        <chi-button variant="flat" type="icon" aria-label="Delete">
          <chi-icon icon="delete"></chi-icon>
        </chi-button>
        <chi-button variant="flat" type="icon" aria-label="Print">
          <chi-icon icon="print"></chi-icon>
        </chi-button>
      </div>
      <div class="chi-bulk-actions__buttons-desktop">
        <chi-button size="xs" aria-label="Download">
          <chi-icon icon="arrow-to-bottom"></chi-icon>
          <span> Download </span>
        </chi-button>
        <chi-button size="xs" aria-label="Compose">
          <chi-icon icon="arrow-to-bottom"></chi-icon>
          <span> Compose </span>
        </chi-button>
        <chi-button size="xs" aria-label="Delete">
          <chi-icon icon="arrow-to-bottom"></chi-icon>
          <span> Delete </span>
        </chi-button>
        <chi-button size="xs" aria-label="Print">
          <chi-icon icon="arrow-to-bottom"></chi-icon>
          <span> Print </span>
        </chi-button>
      </div>
    </div>
  </template>
</ChiDataTable>

<!-- imports -->
import ExamplePopover from './ExamplePopover.vue';
import ExampleDropdown from './ExampleDropdown.vue';

<!-- Config and Data -->
data: {
  config: {
    columnResize: false,
    selectable: true,
    style: {
      portal: false,
      noBorder: false,
      bordered: false,
      hover: false,
      size: 'md',
      striped: true,
    },
    pagination: {
      activePage: 1,
      compact: false,
      firstLast: true,
      pageJumper: true,
    },
    resultsPerPage: 3,
    defaultSort: {
      key: 'name',
      sortBy: 'string',
      direction: 'ascending',
    },
    showExpandAll: true,
    showSelectAllDropdown: true,
  },
  table: {
    head: {
      name: { label: 'Name', sortable: true, sortBy: 'name', sortDataType: 'string', key: true, bold: true },
      status: { label: 'Status', sortable: true, sortBy: 'status', sortDataType: 'string',
        description: 'Helpful information goes here.' },
      lastLogin: { label: 'Last Login', key: true },
      actions: { label: 'Actions', align: 'right', isPrintDisabled: true },
    },
    body: [
      {
        expanded: true,
        id: "name-1",
        data: [
          { template: "name", payload: { name: "Name 1", id: "name-1" } },
          {
            template: "status",
            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
          },
          "18 Dec 2020 3:26 p.m.",
          {
            template: "actions",
            payload: { id: "name-1" },
          },
        ],
        nestedContent: {
          table: {
            data: [
              {
                id: "child-1-name-1",
                data: [
                  "Child 1 Name 1",
                  {
                    template: "status",
                    payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                  },
                  "18 Dec 2020 2:38 a.m.",
                  {
                    template: "actions",
                    payload: { id: "child-1-name-1" },
                  },
                ],
                nestedContent: {
                  table: {
                    data: [
                      {
                        id: "grandchild-1-name-1",
                        data: [
                          "Grand Child 1 Name 1",
                          {
                            template: "status",
                            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-1-name-1" },
                          },
                        ],
                      },
                      {
                        id: "grandchild-2-name-1",
                        data: [
                          "Grand Child 2 Name 1",
                          {
                            template: "status",
                            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-2-name-1" },
                          },
                        ],
                      },
                    ],
                  },
                },
              },
              {
                id: "child-2-name-1",
                data: [
                  "Child 2 Name 1",
                  {
                    template: "status",
                    payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                  },
                  "18 Dec 2020 2:38 a.m.",
                  {
                    template: "actions",
                    payload: { id: "child-2-name-1" },
                  },
                ],
                nestedContent: {
                  table: {
                    data: [
                      {
                        id: "grandchild-3-name-1",
                        data: [
                          "Grand Child 3 Name 1",
                          {
                            template: "status",
                            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-3-name-1" },
                          },
                        ],
                      },
                      {
                        id: "grandchild-4-name-1",
                        data: [
                          "Grand Child 4 Name 1",
                          {
                            template: "status",
                            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-4-name-1" },
                          },
                        ],
                      },
                    ],
                  },
                },
              },
            ],
          },
        },
      },
      {
        id: "name-2",
        data: [
          { template: "name", payload: { name: "Name 2", id: "name-2" } },
          {
            template: "status",
            payload: { status: "Due", icon: 'warning', color: 'warning' },
          },
          "18 Dec 2020 3:26 p.m.",
          {
            template: "actions",
            payload: { id: "name-2" },
          },
        ],
        nestedContent: {
          table: {
            data: [
              {
                id: "child-1-name-2",
                data: [
                  "Child 1 Name 2",
                  {
                    template: "status",
                    payload: { status: "Due", icon: 'warning', color: 'warning' },
                  },
                  "18 Dec 2020 2:38 a.m.",
                  {
                    template: "actions",
                    payload: { id: "child-1-name-2" },
                  },
                ],
                nestedContent: {
                  table: {
                    data: [
                      {
                        id: "grandchild-1-name-2",
                        data: [
                          "Grand Child 1 Name 2",
                          {
                            template: "status",
                            payload: { status: "Due", icon: 'warning', color: 'warning' },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-1-name-2" },
                          },
                        ],
                      },
                      {
                        id: "grandchild-2-name-2",
                        data: [
                          "Grand Child 2 Name 2",
                          {
                            template: "status",
                            payload: { status: "Due", icon: 'warning', color: 'warning' },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-2-name-2" },
                          },
                        ],
                      },
                    ],
                  },
                },
              },
              {
                id: "child-2-name-2",
                data: [
                  "Child 2 Name 2",
                  {
                    template: "status",
                    payload: { status: "Due", icon: 'warning', color: 'warning' },
                  },
                  "18 Dec 2020 2:38 a.m.",
                  {
                    template: "actions",
                    payload: { id: "child-2-name-2" },
                  },
                ],
                nestedContent: {
                  table: {
                    data: [
                      {
                        id: "grandchild-3-name-2",
                        data: [
                          "Grand Child 3 Name 2",
                          {
                            template: "status",
                            payload: { status: "Due", icon: 'warning', color: 'warning' },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-3-name-2" },
                          },
                        ],
                      },
                      {
                        id: "grandchild-4-name-2",
                        data: [
                          "Grand Child 4 Name 2",
                          {
                            template: "status",
                            payload: { status: "Due", icon: 'warning', color: 'warning' },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-4-name-2" },
                          },
                        ],
                      },
                    ],
                  },
                },
              },
            ],
          },
        },
      },
      {
        id: "name-3",
        data: [
          {
            template: "name",
            payload: {
              name: "Name 3",
              id: "name-3",
            },
          },
          {
            template: "status",
            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
          },
          "18 Dec 2020 3:26 p.m.",
          {
            template: "actions",
            payload: {
              id: "name-3",
            },
          },
        ],
        nestedContent: {
          table: {
            data: [
              {
                id: "child-1-name-3",
                data: [
                  "Child 1 Name 3",
                  {
                    template: "status",
                    payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                  },
                  "18 Dec 2020 2:38 a.m.",
                  {
                    template: "actions",
                    payload: { id: "child-1-name-3" },
                  },
                ],
                nestedContent: {
                  table: {
                    data: [
                      {
                        id: "grandchild-1-name-3",
                        data: [
                          "Grand Child 1 Name 3",
                          {
                            template: "status",
                            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-1-name-3" },
                          },
                        ],
                      },
                      {
                        id: "grandchild-2-name-3",
                        data: [
                          "Grand Child 2 Name 3",
                          {
                            template: "status",
                            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-2-name-3" },
                          },
                        ],
                      },
                    ],
                  },
                },
              },
              {
                id: "child-2-name-3",
                data: [
                  "Child 2 Name 3",
                  {
                    template: "status",
                    payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                  },
                  "18 Dec 2020 2:38 a.m.",
                  {
                    template: "actions",
                    payload: { id: "child-2-name-3" },
                  },
                ],
                nestedContent: {
                  table: {
                    data: [
                      {
                        id: "grandchild-3-name-3",
                        data: [
                          "Grand Child 3 Name 3",
                          {
                            template: "status",
                            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-3-name-3" },
                          },
                        ],
                      },
                      {
                        id: "grandchild-4-name-3",
                        data: [
                          "Grand Child 4 Name 3",
                          {
                            template: "status",
                            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-4-name-3" },
                          },
                        ],
                      },
                    ],
                  },
                },
              },
            ],
          },
        },
      },
      {
        id: "name-4",
        data: [
          {
            template: "name",
            payload: {
              name: "Name 4",
              id: "name-4",
            },
          },
          {
            template: "status",
            payload: { status: "Due", icon: 'warning', color: 'warning' },
          },
          "18 Dec 2020 3:26 p.m.",
          {
            template: "actions",
            payload: {
              id: "name-4",
            },
          },
        ],
        nestedContent: {
          table: {
            data: [
              {
                id: "child-1-name-4",
                data: [
                  "Child 1 Name 4",
                  {
                    template: "status",
                    payload: { status: "Due", icon: 'warning', color: 'warning' },
                  },
                  "18 Dec 2020 2:38 a.m.",
                  {
                    template: "actions",
                    payload: { id: "child-1-name-4" },
                  },
                ],
                nestedContent: {
                  table: {
                    data: [
                      {
                        id: "grandchild-1-name-4",
                        data: [
                          "Grand Child 1 Name 4",
                          {
                            template: "status",
                            payload: { status: "Due", icon: 'warning', color: 'warning' },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-1-name-4" },
                          },
                        ],
                      },
                      {
                        id: "grandchild-2-name-4",
                        data: [
                          "Grand Child 2 Name 4",
                          {
                            template: "status",
                            payload: { status: "Due", icon: 'warning', color: 'warning' },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-2-name-4" },
                          },
                        ],
                      },
                    ],
                  },
                },
              },
              {
                id: "child-2-name-4",
                data: [
                  "Child 2 Name 4",
                  {
                    template: "status",
                    payload: { status: "Due", icon: 'warning', color: 'warning' },
                  },
                  "18 Dec 2020 2:38 a.m.",
                  {
                    template: "actions",
                    payload: { id: "child-2-name-4" },
                  },
                ],
                nestedContent: {
                  table: {
                    data: [
                      {
                        id: "grandchild-3-name-4",
                        data: [
                          "Grand Child 3 Name 4",
                          {
                            template: "status",
                            payload: { status: "Due", icon: 'warning', color: 'warning' },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-3-name-4" },
                          },
                        ],
                      },
                      {
                        id: "grandchild-4-name-4",
                        data: [
                          "Grand Child 4 Name 4",
                          {
                            template: "status",
                            payload: { status: "Due", icon: 'warning', color: 'warning' },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-4-name-4" },
                          },
                        ],
                      },
                    ],
                  },
                },
              },
            ],
          },
        },
      },
      {
        id: "name-5",
        data: [
          {
            template: "name",
            payload: {
              name: "Name 5",
              id: "name-5",
            },
          },
          {
            template: "status",
            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
          },
          "18 Dec 2020 3:26 p.m.",
          {
            template: "actions",
            payload: {
              id: "name-5",
            },
          },
        ],
        nestedContent: {
          table: {
            data: [
              {
                id: "child-1-name-5",
                data: [
                  "Child 1 Name 5",
                  {
                    template: "status",
                    payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                  },
                  "18 Dec 2020 2:38 a.m.",
                  {
                    template: "actions",
                    payload: { id: "child-1-name-5" },
                  },
                ],
                nestedContent: {
                  table: {
                    data: [
                      {
                        id: "grandchild-1-name-5",
                        data: [
                          "Grand Child 1 Name 5",
                          {
                            template: "status",
                            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-1-name-5" },
                          },
                        ],
                      },
                      {
                        id: "grandchild-2-name-5",
                        data: [
                          "Grand Child 2 Name 5",
                          {
                            template: "status",
                            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-2-name-5" },
                          },
                        ],
                      },
                    ],
                  },
                },
              },
              {
                id: "child-2-name-5",
                data: [
                  "Child 2 Name 5",
                  {
                    template: "status",
                    payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                  },
                  "18 Dec 2020 2:38 a.m.",
                  {
                    template: "actions",
                    payload: { id: "child-2-name-5" },
                  },
                ],
                nestedContent: {
                  table: {
                    data: [
                      {
                        id: "grandchild-3-name-5",
                        data: [
                          "Grand Child 3 Name 5",
                          {
                            template: "status",
                            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-3-name-5" },
                          },
                        ],
                      },
                      {
                        id: "grandchild-4-name-5",
                        data: [
                          "Grand Child 4 Name 5",
                          {
                            template: "status",
                            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-4-name-5" },
                          },
                        ],
                      },
                    ],
                  },
                },
              },
            ],
          },
        },
      },
      {
        id: "name-6",
        data: [
          {
            template: "name",
            payload: {
              name: "Name 6",
              id: "name-6",
            },
          },
          {
            template: "status",
            payload: { status: "Due", icon: 'warning', color: 'warning' },
          },
          "18 Dec 2020 3:26 p.m.",
          {
            template: "actions",
            payload: {
              id: "name-6",
            },
          },
        ],
        nestedContent: {
          table: {
            data: [
              {
                id: "child-1-name-6",
                data: [
                  "Child 1 Name 6",
                  {
                    template: "status",
                    payload: { status: "Due", icon: 'warning', color: 'warning' },
                  },
                  "18 Dec 2020 2:38 a.m.",
                  {
                    template: "actions",
                    payload: { id: "child-1-name-6" },
                  },
                ],
                nestedContent: {
                  table: {
                    data: [
                      {
                        id: "grandchild-1-name-6",
                        data: [
                          "Grand Child 1 Name 6",
                          {
                            template: "status",
                            payload: { status: "Due", icon: 'warning', color: 'warning' },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-1-name-6" },
                          },
                        ],
                      },
                      {
                        id: "grandchild-2-name-6",
                        data: [
                          "Grand Child 2 Name 6",
                          {
                            template: "status",
                            payload: { status: "Due", icon: 'warning', color: 'warning' },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-2-name-6" },
                          },
                        ],
                      },
                    ],
                  },
                },
              },
              {
                id: "child-2-name-6",
                data: [
                  "Child 2 Name 6",
                  {
                    template: "status",
                    payload: { status: "Due", icon: 'warning', color: 'warning' },
                  },
                  "18 Dec 2020 2:38 a.m.",
                  {
                    template: "actions",
                    payload: { id: "child-2-name-6" },
                  },
                ],
                nestedContent: {
                  table: {
                    data: [
                      {
                        id: "grandchild-3-name-6",
                        data: [
                          "Grand Child 3 Name 6",
                          {
                            template: "status",
                            payload: { status: "Due", icon: 'warning', color: 'warning' },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-3-name-6" },
                          },
                        ],
                      },
                      {
                        id: "grandchild-4-name-6",
                        data: [
                          "Grand Child 4 Name 6",
                          {
                            template: "status",
                            payload: { status: "Due", icon: 'warning', color: 'warning' },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-4-name-6" },
                          },
                        ],
                      },
                    ],
                  },
                },
              },
            ],
          },
        },
      },
    ],
  },
},
methods: {
  printTable() {
    this.$refs.dataTableComplex.print('Data table - Complex')
  }
}
<!-- Template -->
<template>
  <div class="-text--truncate">
    <a
      :id="`ticket-popover-button-${id}`"
      href="#"
      :data-target="`#ticket-popover-${id}`"
      position="top-start">
      {{id}}
    </a>
    <section
      class="chi-popover"
      :id="`ticket-popover-${id}`"
      aria-modal="true"
      role="dialog"
      aria-label="Popover title"
    >
      <header class="chi-popover__header">
        <h2 class="chi-popover__title">{{ id }}</h2>
      </header>
      <div class="chi-popover__content">
        <p class="chi-popover__text">Content for {{ id }}</p>
      </div>
    </section>
  </div>
</template>

<!-- Mounted -->
mounted() {
  const buttonOpenOnHover = document.getElementById(`ticket-popover-button-${this.$props.id}`);
  const popover = chi.popover(buttonOpenOnHover);
  let hoverAnimationTimeout: number;

  if (buttonOpenOnHover) {
    buttonOpenOnHover.addEventListener('mouseenter', function() {
      hoverAnimationTimeout = setTimeout(() => {
        popover.show();
      }, 300);
    });

    buttonOpenOnHover.addEventListener('mouseleave', function() {
      if (hoverAnimationTimeout) {
        clearTimeout(hoverAnimationTimeout);
      }
      popover.hide();
    });
  }
}
beforeDestroy() {
  this.popover.dispose();
}
<!-- Template -->
<template>
  <div class="chi-dropdown">
    <button ref="dropdownTrigger" class="chi-button -icon -flat" aria-label="More options">
      <div class="chi-button__content">
        <i class="chi-icon icon-more-vert" aria-hidden="true"></i>
      </div>
    </button>
    <div class="chi-dropdown__menu">
      <a class="chi-dropdown__menu-item" href="#">
        <span><i class="chi-icon icon-edit -sm -icon--primary" /></span>
        <span>Edit</span>
      </a>
      <a class="chi-dropdown__menu-item" href="#">
        <span><i class="chi-icon icon-delete -sm -icon--primary" /></span>
        <span>Delete</span>
      </a>
    </div>
  </div>
</template>

<!-- mounted -->
mounted() {
  this.dropdown = chi.dropdown(this.$refs.dropdownTrigger);
}
beforeDestroy() {
  this.dropdown.dispose();
}

Base

<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>

<!-- Config and Data -->
data: {
  config: {
    columnResize: true,
    style: {
      portal: false,
      noBorder: false,
      bordered: false,
      hover: false,
      size: 'md',
      striped: false,
    },
    pagination: {
      activePage: 1,
      compact: false,
      firstLast: false,
      pageJumper: true,
    },
    resultsPerPage: 3,
  },
  table: {
    head: {
      name: { label: 'Name' },
      id: { label: 'ID' },
      lastLogin: { label: 'Last Login' },
    },
    body: [
      {
        id: 'name-1',
        data: [
          'Name 1',
          'name-1',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-2',
        data: [
          'Name 2',
          'name-2',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-3',
        data: [
          'Name 3',
          'name-3',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
      {
        id: 'name-4',
        data: [
          'Name 4',
          'name-4',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-5',
        data: [
          'Name 5',
          'name-5',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-6',
        data: [
          'Name 6',
          'name-6',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
    ]
  }
}
<div class="chi-data-table">
  <div class="chi-data-table__head">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell">
        <div>Name</div>
      </div>
      <div class="chi-data-table__cell">
        <div>ID</div>
      </div>
      <div class="chi-data-table__cell">
        <div>Last Login</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__body">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 1</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-1</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 3:26 p.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 2</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-2</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 2:38 a.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 3</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-3</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>5 Nov 2020 10:15 a.m.</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__footer">
    <nav class="chi-pagination" role="navigation" aria-label="Pagination">
      <div class="chi-pagination__content">
        <div class="chi-pagination__start">
          <div class="chi-pagination__results">
            <span class="chi-pagination__label">240 results</span>
          </div>
          <div class="chi-pagination__page-size">
            <div class="chi-dropdown">
              <button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-1">20</button>
              <div class="chi-dropdown__menu -w--xs">
                <a class="chi-dropdown__menu-item -active" href="#">20</a>
                <a class="chi-dropdown__menu-item" href="#">40</a>
                <a class="chi-dropdown__menu-item" href="#">60</a>
                <a class="chi-dropdown__menu-item" href="#">80</a>
                <a class="chi-dropdown__menu-item" href="#">All</a>
              </div>
            </div>
            <span class="chi-pagination__label">per page</span>
          </div>
        </div>
        <div class="chi-pagination__center">
          <div class="chi-pagination__button-group chi-button-group">
            <button class="chi-button -icon -flat" aria-label="Previous page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
              </div>
            </button>
            <button class="chi-button -flat" aria-label="Page 1">1</button>
            <button class="chi-button -flat" aria-label="Page 2">2</button>
            <button class="chi-button -flat -active" aria-label="Page 3">3</button>
            <button class="chi-button -flat" aria-label="Page 4">4</button>
            <button class="chi-button -flat" aria-label="Page 5">5</button>
            <div class="chi-button -flat" aria-hidden="true" disabled>...</div>
            <button class="chi-button -flat" aria-label="Page 12">12</button>
            <button class="chi-button -icon -flat" aria-label="Next page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
              </div>
            </button>
          </div>
        </div>
        <div class="chi-pagination__end">
          <div class="chi-pagination__jumper">
            <label class="chi-pagination__label" for="jumper-input-1">Go to page:</label>
            <input class="chi-input" type="text" id="jumper-input-1" />
          </div>
        </div>
      </div>
    </nav>
  </div>
</div>

Empty

No Results

Use noResultsMessage config to customize the no results data message
<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>

<!-- Config and Data -->
data: {
  config: {
    columnResize: true,
    noResultsMessage: 'No matching results',
    style: {
      portal: false,
      noBorder: false,
      bordered: false,
      hover: false,
      size: 'md',
      striped: false,
    },
    pagination: {
      activePage: 1,
      compact: false,
      firstLast: false,
      pageJumper: true,
    },
    resultsPerPage: 3,
  },
  table: {
    head: {
      name: { label: 'Name' },
      id: { label: 'ID' },
      lastLogin: { label: 'Last Login' },
    },
    body: []
  }
}
<div class="chi-data-table">
  <div class="chi-data-table__head">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell">
        <div>Name</div>
      </div>
      <div class="chi-data-table__cell">
        <div>ID</div>
      </div>
      <div class="chi-data-table__cell">
        <div>Last Login</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__body">
    <div class="chi-data-table__row-empty">
      <div>No matching results</div>
    </div>
  </div>
</div>

No Filters

Use noFiltersMessage config to customize the no filters data message
<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>

<!-- Config and Data -->
data: {
  config: {
    columnResize: true,
    noFiltersMessage: "Search for or select at least one filter to get results",
    style: {
      portal: false,
      noBorder: false,
      bordered: false,
      hover: false,
      size: 'md',
      striped: false,
    },
    pagination: {
      activePage: 1,
      compact: false,
      firstLast: false,
      pageJumper: true,
    },
    resultsPerPage: 3,
  },
  table: {
    head: {
      name: { label: 'Name' },
      id: { label: 'ID' },
      lastLogin: { label: 'Last Login' },
    },
    body: []
  }
}
<div class="chi-data-table">
  <div class="chi-data-table__head">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell">
        <div>Name</div>
      </div>
      <div class="chi-data-table__cell">
        <div>ID</div>
      </div>
      <div class="chi-data-table__cell">
        <div>Last Login</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__body">
    <div class="chi-data-table__row-empty">
      <i class="-mr--1 chi-icon icon-search"></i>
      Search for or select at least one filter to get results
    </div>
  </div>
</div>

No Border

Use noBorder config to remove the borders
<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>

<!-- Config and Data -->
data: {
  config: {
    columnResize: true,
    style: {
      portal: false,
      noBorder: true,
      bordered: false,
      hover: false,
      size: 'md',
      striped: false,
    },
    pagination: {
      activePage: 1,
      compact: false,
      firstLast: false,
      pageJumper: true,
    },
    resultsPerPage: 3,
  },
  table: {
    head: {
      name: { label: 'Name' },
      id: { label: 'ID' },
      lastLogin: { label: 'Last Login' },
    },
    body: [
      {
        id: 'name-1',
        data: [
          'Name 1',
          'name-1',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-2',
        data: [
          'Name 2',
          'name-2',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-3',
        data: [
          'Name 3',
          'name-3',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
      {
        id: 'name-4',
        data: [
          'Name 4',
          'name-4',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-5',
        data: [
          'Name 5',
          'name-5',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-6',
        data: [
          'Name 6',
          'name-6',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
    ]
  }
}
<div class="chi-data-table -no-border">
  <div class="chi-data-table__head">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell">
        <div>Name</div>
      </div>
      <div class="chi-data-table__cell">
        <div>ID</div>
      </div>
      <div class="chi-data-table__cell">
        <div>Last Login</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__body">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 1</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-1</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 3:26 p.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 2</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-2</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 2:38 a.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 3</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-3</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>5 Nov 2020 10:15 a.m.</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__footer">
    <nav class="chi-pagination" role="navigation" aria-label="Pagination">
      <div class="chi-pagination__content">
        <div class="chi-pagination__start">
          <div class="chi-pagination__results">
            <span class="chi-pagination__label">240 results</span>
          </div>
          <div class="chi-pagination__page-size">
            <div class="chi-dropdown">
              <button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-2">20</button>
              <div class="chi-dropdown__menu -w--xs">
                <a class="chi-dropdown__menu-item -active" href="#">20</a>
                <a class="chi-dropdown__menu-item" href="#">40</a>
                <a class="chi-dropdown__menu-item" href="#">60</a>
                <a class="chi-dropdown__menu-item" href="#">80</a>
                <a class="chi-dropdown__menu-item" href="#">All</a>
              </div>
            </div>
            <span class="chi-pagination__label">per page</span>
          </div>
        </div>
        <div class="chi-pagination__center">
          <div class="chi-pagination__button-group chi-button-group">
            <button class="chi-button -icon -flat" aria-label="Previous page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
              </div>
            </button>
            <button class="chi-button -flat" aria-label="Page 1">1</button>
            <button class="chi-button -flat" aria-label="Page 2">2</button>
            <button class="chi-button -flat -active" aria-label="Page 3">3</button>
            <button class="chi-button -flat" aria-label="Page 4">4</button>
            <button class="chi-button -flat" aria-label="Page 5">5</button>
            <div class="chi-button -flat" aria-hidden="true" disabled>...</div>
            <button class="chi-button -flat" aria-label="Page 12">12</button>
            <button class="chi-button -icon -flat" aria-label="Next page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
              </div>
            </button>
          </div>
        </div>
        <div class="chi-pagination__end">
          <div class="chi-pagination__jumper">
            <label class="chi-pagination__label" for="jumper-input-2">Go to page:</label>
            <input class="chi-input" type="text" id="jumper-input-2" />
          </div>
        </div>
      </div>
    </nav>
  </div>
</div>

Striped

Use striped config to achieve striped styles
<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>

<!-- Config and Data -->
data: {
  config: {
    columnResize: true,
    style: {
      portal: false,
      noBorder: false,
      bordered: false,
      hover: false,
      size: 'md',
      striped: true,
    },
    pagination: {
      activePage: 1,
      compact: false,
      firstLast: false,
      pageJumper: true,
    },
    resultsPerPage: 3,
  },
  table: {
    head: {
      name: { label: 'Name' },
      id: { label: 'ID' },
      lastLogin: { label: 'Last Login' },
    },
    body: [
      {
        id: 'name-1',
        data: [
          'Name 1',
          'name-1',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-2',
        data: [
          'Name 2',
          'name-2',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-3',
        data: [
          'Name 3',
          'name-3',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
      {
        id: 'name-4',
        data: [
          'Name 4',
          'name-4',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-5',
        data: [
          'Name 5',
          'name-5',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-6',
        data: [
          'Name 6',
          'name-6',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
    ]
  }
}
<div class="chi-data-table">
  <div class="chi-data-table__head">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell">
        <div>Name</div>
      </div>
      <div class="chi-data-table__cell">
        <div>ID</div>
      </div>
      <div class="chi-data-table__cell">
        <div>Last Login</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__body">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 1</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-1</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 3:26 p.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row -striped">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 2</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-2</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 2:38 a.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 3</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-3</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>5 Nov 2020 10:15 a.m.</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__footer">
    <nav class="chi-pagination" role="navigation" aria-label="Pagination">
      <div class="chi-pagination__content">
        <div class="chi-pagination__start">
          <div class="chi-pagination__results">
            <span class="chi-pagination__label">240 results</span>
          </div>
          <div class="chi-pagination__page-size">
            <div class="chi-dropdown">
              <button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-3">20</button>
              <div class="chi-dropdown__menu -w--xs">
                <a class="chi-dropdown__menu-item -active" href="#">20</a>
                <a class="chi-dropdown__menu-item" href="#">40</a>
                <a class="chi-dropdown__menu-item" href="#">60</a>
                <a class="chi-dropdown__menu-item" href="#">80</a>
                <a class="chi-dropdown__menu-item" href="#">All</a>
              </div>
            </div>
            <span class="chi-pagination__label">per page</span>
          </div>
        </div>
        <div class="chi-pagination__center">
          <div class="chi-pagination__button-group chi-button-group">
            <button class="chi-button -icon -flat" aria-label="Previous page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
              </div>
            </button>
            <button class="chi-button -flat" aria-label="Page 1">1</button>
            <button class="chi-button -flat" aria-label="Page 2">2</button>
            <button class="chi-button -flat -active" aria-label="Page 3">3</button>
            <button class="chi-button -flat" aria-label="Page 4">4</button>
            <button class="chi-button -flat" aria-label="Page 5">5</button>
            <div class="chi-button -flat" aria-hidden="true" disabled>...</div>
            <button class="chi-button -flat" aria-label="Page 12">12</button>
            <button class="chi-button -icon -flat" aria-label="Next page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
              </div>
            </button>
          </div>
        </div>
        <div class="chi-pagination__end">
          <div class="chi-pagination__jumper">
            <label class="chi-pagination__label" for="jumper-input-3">Go to page:</label>
            <input class="chi-input" type="text" id="jumper-input-3" />
          </div>
        </div>
      </div>
    </nav>
  </div>
</div>

Hover

Use hover config to achieve hover behavior
<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>

<!-- Config and Data -->
data: {
  config: {
    columnResize: true,
    style: {
      portal: false,
      noBorder: false,
      bordered: false,
      hover: true,
      size: 'md',
      striped: false,
    },
    pagination: {
      activePage: 1,
      compact: false,
      firstLast: false,
      pageJumper: true,
    },
    resultsPerPage: 3,
  },
  table: {
    head: {
      name: { label: 'Name' },
      id: { label: 'ID' },
      lastLogin: { label: 'Last Login' },
    },
    body: [
      {
        id: 'name-1',
        data: [
          'Name 1',
          'name-1',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-2',
        data: [
          'Name 2',
          'name-2',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-3',
        data: [
          'Name 3',
          'name-3',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
      {
        id: 'name-4',
        data: [
          'Name 4',
          'name-4',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-5',
        data: [
          'Name 5',
          'name-5',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-6',
        data: [
          'Name 6',
          'name-6',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
    ]
  }
}
<div class="chi-data-table -hover">
  <div class="chi-data-table__head">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell">
        <div>Name</div>
      </div>
      <div class="chi-data-table__cell">
        <div>ID</div>
      </div>
      <div class="chi-data-table__cell">
        <div>Last Login</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__body">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 1</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-1</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 3:26 p.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 2</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-2</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 2:38 a.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 3</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-3</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>5 Nov 2020 10:15 a.m.</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__footer">
    <nav class="chi-pagination" role="navigation" aria-label="Pagination">
      <div class="chi-pagination__content">
        <div class="chi-pagination__start">
          <div class="chi-pagination__results">
            <span class="chi-pagination__label">240 results</span>
          </div>
          <div class="chi-pagination__page-size">
            <div class="chi-dropdown">
              <button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-4">20</button>
              <div class="chi-dropdown__menu -w--xs">
                <a class="chi-dropdown__menu-item -active" href="#">20</a>
                <a class="chi-dropdown__menu-item" href="#">40</a>
                <a class="chi-dropdown__menu-item" href="#">60</a>
                <a class="chi-dropdown__menu-item" href="#">80</a>
                <a class="chi-dropdown__menu-item" href="#">All</a>
              </div>
            </div>
            <span class="chi-pagination__label">per page</span>
          </div>
        </div>
        <div class="chi-pagination__center">
          <div class="chi-pagination__button-group chi-button-group">
            <button class="chi-button -icon -flat" aria-label="Previous page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
              </div>
            </button>
            <button class="chi-button -flat" aria-label="Page 1">1</button>
            <button class="chi-button -flat" aria-label="Page 2">2</button>
            <button class="chi-button -flat -active" aria-label="Page 3">3</button>
            <button class="chi-button -flat" aria-label="Page 4">4</button>
            <button class="chi-button -flat" aria-label="Page 5">5</button>
            <div class="chi-button -flat" aria-hidden="true" disabled>...</div>
            <button class="chi-button -flat" aria-label="Page 12">12</button>
            <button class="chi-button -icon -flat" aria-label="Next page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
              </div>
            </button>
          </div>
        </div>
        <div class="chi-pagination__end">
          <div class="chi-pagination__jumper">
            <label class="chi-pagination__label" for="jumper-input-4">Go to page:</label>
            <input class="chi-input" type="text" id="jumper-input-4" />
          </div>
        </div>
      </div>
    </nav>
  </div>
</div>

Bordered

Use bordered config to achieve bordered behavior
<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>

<!-- Config and Data -->
data: {
  config: {
    columnResize: true,
    style: {
      portal: false,
      noBorder: false,
      bordered: true,
      hover: false,
      size: 'md',
      striped: false,
    },
    pagination: {
      activePage: 1,
      compact: false,
      firstLast: false,
      pageJumper: true,
    },
    resultsPerPage: 3,
  },
  table: {
    head: {
      name: { label: 'Name' },
      id: { label: 'ID' },
      lastLogin: { label: 'Last Login' },
    },
    body: [
      {
        id: 'name-1',
        data: [
          'Name 1',
          'name-1',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-2',
        data: [
          'Name 2',
          'name-2',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-3',
        data: [
          'Name 3',
          'name-3',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
      {
        id: 'name-4',
        data: [
          'Name 4',
          'name-4',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-5',
        data: [
          'Name 5',
          'name-5',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-6',
        data: [
          'Name 6',
          'name-6',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
    ]
  }
}
<div class="chi-data-table -bordered">
  <div class="chi-data-table__head">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell">
        <div>Name</div>
      </div>
      <div class="chi-data-table__cell">
        <div>ID</div>
      </div>
      <div class="chi-data-table__cell">
        <div>Last Login</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__body">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 1</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-1</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 3:26 p.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 2</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-2</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 2:38 a.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 3</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-3</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>5 Nov 2020 10:15 a.m.</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__footer">
    <nav class="chi-pagination" role="navigation" aria-label="Pagination">
      <div class="chi-pagination__content">
        <div class="chi-pagination__start">
          <div class="chi-pagination__results">
            <span class="chi-pagination__label">240 results</span>
          </div>
          <div class="chi-pagination__page-size">
            <div class="chi-dropdown">
              <button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-5">20</button>
              <div class="chi-dropdown__menu -w--xs">
                <a class="chi-dropdown__menu-item -active" href="#">20</a>
                <a class="chi-dropdown__menu-item" href="#">40</a>
                <a class="chi-dropdown__menu-item" href="#">60</a>
                <a class="chi-dropdown__menu-item" href="#">80</a>
                <a class="chi-dropdown__menu-item" href="#">All</a>
              </div>
            </div>
            <span class="chi-pagination__label">per page</span>
          </div>
        </div>
        <div class="chi-pagination__center">
          <div class="chi-pagination__button-group chi-button-group">
            <button class="chi-button -icon -flat" aria-label="Previous page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
              </div>
            </button>
            <button class="chi-button -flat" aria-label="Page 1">1</button>
            <button class="chi-button -flat" aria-label="Page 2">2</button>
            <button class="chi-button -flat -active" aria-label="Page 3">3</button>
            <button class="chi-button -flat" aria-label="Page 4">4</button>
            <button class="chi-button -flat" aria-label="Page 5">5</button>
            <div class="chi-button -flat" aria-hidden="true" disabled>...</div>
            <button class="chi-button -flat" aria-label="Page 12">12</button>
            <button class="chi-button -icon -flat" aria-label="Next page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
              </div>
            </button>
          </div>
        </div>
        <div class="chi-pagination__end">
          <div class="chi-pagination__jumper">
            <label class="chi-pagination__label" for="jumper-input-5">Go to page:</label>
            <input class="chi-input" type="text" id="jumper-input-5" />
          </div>
        </div>
      </div>
    </nav>
  </div>
</div>

Active

Use active property to achieve active state of rows
<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>

<!-- Config and Data -->
data: {
  config: {
    columnResize: true,
    style: {
      portal: false,
      noBorder: false,
      bordered: false,
      hover: false,
      size: 'md',
      striped: false,
    },
    pagination: {
      activePage: 1,
      compact: false,
      firstLast: false,
      pageJumper: true,
    },
    resultsPerPage: 3,
  },
  table: {
    head: {
      name: { label: 'Name' },
      id: { label: 'ID' },
      lastLogin: { label: 'Last Login' },
    },
    body: [
      {
        id: 'name-1',
        data: [
          'Name 1',
          'name-1',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        active: true,
        id: 'name-2',
        data: [
          'Name 2',
          'name-2',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-3',
        data: [
          'Name 3',
          'name-3',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
      {
        id: 'name-4',
        data: [
          'Name 4',
          'name-4',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-5',
        data: [
          'Name 5',
          'name-5',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-6',
        data: [
          'Name 6',
          'name-6',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
    ]
  }
}
<div class="chi-data-table">
  <div class="chi-data-table__head">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell">
        <div>Name</div>
      </div>
      <div class="chi-data-table__cell">
        <div>ID</div>
      </div>
      <div class="chi-data-table__cell">
        <div>Last Login</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__body">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 1</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-1</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 3:26 p.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row -active">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 2</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-2</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 2:38 a.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 3</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-3</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>5 Nov 2020 10:15 a.m.</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__footer">
    <nav class="chi-pagination" role="navigation" aria-label="Pagination">
      <div class="chi-pagination__content">
        <div class="chi-pagination__start">
          <div class="chi-pagination__results">
            <span class="chi-pagination__label">240 results</span>
          </div>
          <div class="chi-pagination__page-size">
            <div class="chi-dropdown">
              <button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-6">20</button>
              <div class="chi-dropdown__menu -w--xs">
                <a class="chi-dropdown__menu-item -active" href="#">20</a>
                <a class="chi-dropdown__menu-item" href="#">40</a>
                <a class="chi-dropdown__menu-item" href="#">60</a>
                <a class="chi-dropdown__menu-item" href="#">80</a>
                <a class="chi-dropdown__menu-item" href="#">All</a>
              </div>
            </div>
            <span class="chi-pagination__label">per page</span>
          </div>
        </div>
        <div class="chi-pagination__center">
          <div class="chi-pagination__button-group chi-button-group">
            <button class="chi-button -icon -flat" aria-label="Previous page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
              </div>
            </button>
            <button class="chi-button -flat" aria-label="Page 1">1</button>
            <button class="chi-button -flat" aria-label="Page 2">2</button>
            <button class="chi-button -flat -active" aria-label="Page 3">3</button>
            <button class="chi-button -flat" aria-label="Page 4">4</button>
            <button class="chi-button -flat" aria-label="Page 5">5</button>
            <div class="chi-button -flat" aria-hidden="true" disabled>...</div>
            <button class="chi-button -flat" aria-label="Page 12">12</button>
            <button class="chi-button -icon -flat" aria-label="Next page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
              </div>
            </button>
          </div>
        </div>
        <div class="chi-pagination__end">
          <div class="chi-pagination__jumper">
            <label class="chi-pagination__label" for="jumper-input-6">Go to page:</label>
            <input class="chi-input" type="text" id="jumper-input-6" />
          </div>
        </div>
      </div>
    </nav>
  </div>
</div>

Selectable

Use selectable config to render rows with selectable checkboxes
<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>

<!-- Config and Data -->
data: {
  config: {
    columnResize: true,
    style: {
      portal: false,
      noBorder: false,
      bordered: false,
      hover: false,
      size: 'md',
      striped: false,
    },
    pagination: {
      activePage: 1,
      compact: false,
      firstLast: false,
      pageJumper: true,
    },
    selectable: true,
    showSelectAllDropdown: true,
    resultsPerPage: 3,
  },
  table: {
    head: {
      name: { label: 'Name' },
      id: { label: 'ID' },
      lastLogin: { label: 'Last Login' },
    },
    body: [
      {
        id: 'name-1',
        data: [
          'Name 1',
          'name-1',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-2',
        data: [
          'Name 2',
          'name-2',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-3',
        data: [
          'Name 3',
          'name-3',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
      {
        id: 'name-4',
        data: [
          'Name 4',
          'name-4',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-5',
        data: [
          'Name 5',
          'name-5',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-6',
        data: [
          'Name 6',
          'name-6',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
    ]
  }
}
<div class="chi-data-table">
  <div class="chi-data-table__head">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell -selectable">
        <div class="chi-checkbox">
          <input type="checkbox" class="chi-checkbox__input" id="checkbox-ba1">
          <label class="chi-checkbox__label" for="checkbox-ba1">
            <div class="-sr--only">Label</div>
          </label>
        </div>
        <div class="chi-dropdown">
          <button aria-label="Select All Dropdown" data-position="bottom-start" class="chi-button -icon -flat -has-active">
            <div class="chi-button__content">
              <i aria-hidden="true" class="chi-icon icon-chevron-down -xs"></i>
            </div>
          </button>
          <div class="chi-dropdown__menu" x-placement="bottom-start">
            <a class="chi-dropdown__menu-item">Select all items, this page</a>
            <a class="chi-dropdown__menu-item">Select all items, all pages</a>
            <a class="chi-dropdown__menu-item">Deselect all</a>
          </div>
        </div>
      </div>
      <div class="chi-data-table__cell">
        <div>Name</div>
      </div>
      <div class="chi-data-table__cell">
        <div>ID</div>
      </div>
      <div class="chi-data-table__cell">
        <div>Last Login</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__body">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell -selectable">
        <div class="chi-checkbox">
          <input type="checkbox" class="chi-checkbox__input" id="checkbox-ba2">
          <label class="chi-checkbox__label" for="checkbox-ba2">
            <div class="-sr--only">Label</div>
          </label>
        </div>
      </div>
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 1</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-1</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 3:26 p.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row -selected">
      <div class="chi-data-table__cell -lh--1 -selectable">
        <div class="chi-checkbox">
          <input type="checkbox" class="chi-checkbox__input" id="checkbox-ba3">
          <label class="chi-checkbox__label" for="checkbox-ba3">
            <div class="-sr--only">Label</div>
          </label>
        </div>
      </div>
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 2</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-2</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 2:38 a.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell -lh--1 -selectable">
        <div class="chi-checkbox">
          <input type="checkbox" class="chi-checkbox__input" id="checkbox-ba4">
          <label class="chi-checkbox__label" for="checkbox-ba4">
            <div class="-sr--only">Label</div>
          </label>
        </div>
      </div>
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 3</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-3</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>5 Nov 2020 10:15 a.m.</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__footer">
    <nav class="chi-pagination" role="navigation" aria-label="Pagination">
      <div class="chi-pagination__content">
        <div class="chi-pagination__start">
          <div class="chi-pagination__results">
            <span class="chi-pagination__label">240 results</span>
          </div>
          <div class="chi-pagination__page-size">
            <div class="chi-dropdown">
              <button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-7">20</button>
              <div class="chi-dropdown__menu -w--xs">
                <a class="chi-dropdown__menu-item -active" href="#">20</a>
                <a class="chi-dropdown__menu-item" href="#">40</a>
                <a class="chi-dropdown__menu-item" href="#">60</a>
                <a class="chi-dropdown__menu-item" href="#">80</a>
                <a class="chi-dropdown__menu-item" href="#">All</a>
              </div>
            </div>
            <span class="chi-pagination__label">per page</span>
          </div>
        </div>
        <div class="chi-pagination__center">
          <div class="chi-pagination__button-group chi-button-group">
            <button class="chi-button -icon -flat" aria-label="Previous page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
              </div>
            </button>
            <button class="chi-button -flat" aria-label="Page 1">1</button>
            <button class="chi-button -flat" aria-label="Page 2">2</button>
            <button class="chi-button -flat -active" aria-label="Page 3">3</button>
            <button class="chi-button -flat" aria-label="Page 4">4</button>
            <button class="chi-button -flat" aria-label="Page 5">5</button>
            <div class="chi-button -flat" aria-hidden="true" disabled>...</div>
            <button class="chi-button -flat" aria-label="Page 12">12</button>
            <button class="chi-button -icon -flat" aria-label="Next page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
              </div>
            </button>
          </div>
        </div>
        <div class="chi-pagination__end">
          <div class="chi-pagination__jumper">
            <label class="chi-pagination__label" for="jumper-input-7">Go to page:</label>
            <input class="chi-input" type="text" id="jumper-input-7" />
          </div>
        </div>
      </div>
    </nav>
  </div>
</div>

Radio selection

Use selectable config to render rows with radio buttons
<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>

<!-- Config and Data -->
data: {
  config: {
    columnResize: true,
    style: {
      portal: false,
      noBorder: false,
      bordered: false,
      hover: false,
      size: 'md',
      striped: false,
    },
    pagination: {
      activePage: 1,
      compact: false,
      firstLast: false,
      pageJumper: true,
    },
    selectable: 'radio',
    resultsPerPage: 3,
  },
  table: {
    head: {
      name: { label: 'Name' },
      id: { label: 'ID' },
      lastLogin: { label: 'Last Login' },
    },
    body: [
      {
        id: 'name-1',
        data: [
          'Name 1',
          'name-1',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-2',
        data: [
          'Name 2',
          'name-2',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-3',
        data: [
          'Name 3',
          'name-3',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
      {
        id: 'name-4',
        data: [
          'Name 4',
          'name-4',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-5',
        data: [
          'Name 5',
          'name-5',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-6',
        data: [
          'Name 6',
          'name-6',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
    ]
  }
}
<div class="chi-data-table">
  <div class="chi-data-table__head">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell -selectable"></div>
      <div class="chi-data-table__cell">
        <div>Name</div>
      </div>
      <div class="chi-data-table__cell">
        <div>ID</div>
      </div>
      <div class="chi-data-table__cell">
        <div>Last Login</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__body">
    <fieldset>
      <legend class="--sr-only">Select a Row</legend>
      <div class="chi-data-table__row">
        <div class="chi-data-table__cell -selectable">
          <div class="chi-radio">
            <input type="radio" class="chi-radio__input" id="radio-ba2" name="radios">
            <label class="chi-radio__label" for="radio-ba2"></label>
          </div>
        </div>
        <div class=" chi-data-table__cell" data-label="Name">
          <div>Name 1</div>
        </div>
        <div class="chi-data-table__cell" data-label="ID">
          <div>name-1</div>
        </div>
        <div class="chi-data-table__cell" data-label="Last Login">
          <div>18 Dec 2020 3:26 p.m.</div>
        </div>
      </div>
      <div class="chi-data-table__row -selected">
        <div class="chi-data-table__cell -lh--1 -selectable">
          <div class="chi-radio">
            <input type="radio" class="chi-radio__input" id="radio-ba3" name="radios">
            <label class="chi-radio__label" for="radio-ba3"></label>
          </div>
        </div>
        <div class=" chi-data-table__cell" data-label="Name">
          <div>Name 2</div>
        </div>
        <div class="chi-data-table__cell" data-label="ID">
          <div>name-2</div>
        </div>
        <div class="chi-data-table__cell" data-label="Last Login">
          <div>18 Dec 2020 2:38 a.m.</div>
        </div>
      </div>
      <div class="chi-data-table__row">
        <div class="chi-data-table__cell -lh--1 -selectable">
          <div class="chi-radio">
            <input type="radio" class="chi-radio__input" id="radio-ba4" name="radios">
            <label class="chi-radio__label" for="radio-ba4"></label>
          </div>
        </div>
        <div class=" chi-data-table__cell" data-label="Name">
          <div>Name 3</div>
        </div>
        <div class="chi-data-table__cell" data-label="ID">
          <div>name-3</div>
        </div>
        <div class="chi-data-table__cell" data-label="Last Login">
          <div>5 Nov 2020 10:15 a.m.</div>
        </div>
      </div>
    </fieldset>
  </div>
  <div class="chi-data-table__footer">
    <nav class="chi-pagination" role="navigation" aria-label="Pagination">
      <div class="chi-pagination__content">
        <div class="chi-pagination__start">
          <div class="chi-pagination__results">
            <span class="chi-pagination__label">240 results</span>
          </div>
          <div class="chi-pagination__page-size">
            <div class="chi-dropdown">
              <button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-7">20</button>
              <div class="chi-dropdown__menu -w--xs">
                <a class="chi-dropdown__menu-item -active" href="#">20</a>
                <a class="chi-dropdown__menu-item" href="#">40</a>
                <a class="chi-dropdown__menu-item" href="#">60</a>
                <a class="chi-dropdown__menu-item" href="#">80</a>
                <a class="chi-dropdown__menu-item" href="#">All</a>
              </div>
            </div>
            <span class="chi-pagination__label">per page</span>
          </div>
        </div>
        <div class="chi-pagination__center">
          <div class="chi-pagination__button-group chi-button-group">
            <button class="chi-button -icon -flat" aria-label="Previous page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
              </div>
            </button>
            <button class="chi-button -flat" aria-label="Page 1">1</button>
            <button class="chi-button -flat" aria-label="Page 2">2</button>
            <button class="chi-button -flat -active" aria-label="Page 3">3</button>
            <button class="chi-button -flat" aria-label="Page 4">4</button>
            <button class="chi-button -flat" aria-label="Page 5">5</button>
            <div class="chi-button -flat" aria-hidden="true" disabled>...</div>
            <button class="chi-button -flat" aria-label="Page 12">12</button>
            <button class="chi-button -icon -flat" aria-label="Next page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
              </div>
            </button>
          </div>
        </div>
        <div class="chi-pagination__end">
          <div class="chi-pagination__jumper">
            <label class="chi-pagination__label" for="jumper-input-7">Go to page:</label>
            <input class="chi-input" type="text" id="jumper-input-7" />
          </div>
        </div>
      </div>
    </nav>
  </div>
</div>

Accordion

Use nestedContent property to provide data of row accordion content
<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>

<!-- Config and Data -->
data: {
  config: {
    columnResize: true,
    style: {
      portal: false,
      noBorder: false,
      bordered: false,
      hover: false,
      size: 'md',
      striped: false,
    },
    pagination: {
      activePage: 1,
      compact: false,
      firstLast: false,
      pageJumper: true,
    },
    showExpandAll: true,
    resultsPerPage: 3,
  },
  table: {
    head: {
      name: { label: 'Name' },
      id: { label: 'ID' },
      lastLogin: { label: 'Last Login' },
    },
    body: [
      {
        expanded: true,
        id: 'name-1',
        nestedContent: {
            value: "Accordion content",
        },
        data: [
          'Name 1',
          'name-1',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-2',
        nestedContent: {
            value: "Accordion content",
        },
        data: [
          'Name 2',
          'name-2',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-3',
        nestedContent: {
            value: "Accordion content",
        },
        data: [
          'Name 3',
          'name-3',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
      {
        id: 'name-4',
        nestedContent: {
            value: "Accordion content",
        },
        data: [
          'Name 4',
          'name-4',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-5',
        nestedContent: {
            value: "Accordion content",
        },
        data: [
          'Name 5',
          'name-5',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-6',
        nestedContent: {
            value: "Accordion content",
        },
        data: [
          'Name 6',
          'name-6',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
    ]
  }
}
<div class="chi-data-table">
  <div class="chi-data-table__head">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell -expandable -position--relative">
        <button class="chi-button -icon -flat -expand -sm">
          <div class="chi-button__content">
            <i class="chi-icon icon-squares-plus-outline"></i>
          </div>
        </button>
      </div>
      <div class="chi-data-table__cell">
        <div>Name</div>
      </div>
      <div class="chi-data-table__cell">
        <div>ID</div>
      </div>
      <div class="chi-data-table__cell">
        <div>Last Login</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__body">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell -expandable">
        <button class="chi-button -icon -flat -sm" aria-label="Expand row">
          <div class="chi-button__content">
            <i class="chi-icon icon-plus" aria-hidden="true"></i>
          </div>
        </button>
      </div>
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 1</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-1</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 3:26 p.m. </div>
      </div>
    </div>
    <div class="chi-data-table__row -expanded">
      <div class="chi-data-table__cell -expandable">
        <button class="chi-button -icon -flat -sm" aria-label="Expand row">
          <div class="chi-button__content">
            <i class="chi-icon icon-plus" aria-hidden="true"></i>
          </div>
        </button>
      </div>
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 2</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-2</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 2:38 a.m. </div>
      </div>
    </div>
    <div class="chi-data-table__row-child -container">
      <div>Accordion content</div>
    </div>
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell -expandable">
        <button class="chi-button -icon -flat -sm" aria-label="Expand row">
          <div class="chi-button__content">
            <i class="chi-icon icon-plus" aria-hidden="true"></i>
          </div>
        </button>
      </div>
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 3</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-3</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>5 Nov 2020 10:15 a.m.</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__footer">
    <nav class="chi-pagination" role="navigation" aria-label="Pagination">
      <div class="chi-pagination__content">
        <div class="chi-pagination__start">
          <div class="chi-pagination__results">
            <span class="chi-pagination__label">240 results</span>
          </div>
          <div class="chi-pagination__page-size">
            <div class="chi-dropdown">
              <button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-9">20</button>
              <div class="chi-dropdown__menu -w--xs">
                <a class="chi-dropdown__menu-item -active" href="#">20</a>
                <a class="chi-dropdown__menu-item" href="#">40</a>
                <a class="chi-dropdown__menu-item" href="#">60</a>
                <a class="chi-dropdown__menu-item" href="#">80</a>
                <a class="chi-dropdown__menu-item" href="#">All</a>
              </div>
            </div>
            <span class="chi-pagination__label">per page</span>
          </div>
        </div>
        <div class="chi-pagination__center">
          <div class="chi-pagination__button-group chi-button-group">
            <button class="chi-button -icon -flat" aria-label="Previous page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
              </div>
            </button>
            <button class="chi-button -flat" aria-label="Page 1">1</button>
            <button class="chi-button -flat" aria-label="Page 2">2</button>
            <button class="chi-button -flat -active" aria-label="Page 3">3</button>
            <button class="chi-button -flat" aria-label="Page 4">4</button>
            <button class="chi-button -flat" aria-label="Page 5">5</button>
            <div class="chi-button -flat" aria-hidden="true" disabled>...</div>
            <button class="chi-button -flat" aria-label="Page 12">12</button>
            <button class="chi-button -icon -flat" aria-label="Next page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
              </div>
            </button>
          </div>
        </div>
        <div class="chi-pagination__end">
          <div class="chi-pagination__jumper">
            <label class="chi-pagination__label" for="jumper-input-9">Go to page:</label>
            <input class="chi-input" type="text" id="jumper-input-9" />
          </div>
        </div>
      </div>
    </nav>
  </div>
</div>

Sorting

Use sortBy and sortDataType properties to make the column sortable
<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>

<!-- Config and Data -->
data: {
  config: {
    columnResize: true,
    style: {
      portal: false,
      noBorder: false,
      bordered: false,
      hover: false,
      size: 'md',
      striped: false,
    },
    pagination: {
      activePage: 1,
      compact: false,
      firstLast: false,
      pageJumper: true,
    },
    resultsPerPage: 3,
  },
  table: {
    head: {
      name: { label: 'Name', sortable: true, sortDataType: 'string' },
      id: { label: 'ID', sortable: true, sortDataType: 'string' },
      lastLogin: { label: 'Last Login', sortable: true, sortDatatype: 'date' },
    },
    body: [
      {
        id: 'name-1',
        data: [
          'Name 1',
          'name-1',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-2',
        data: [
          'Name 2',
          'name-2',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-3',
        data: [
          'Name 3',
          'name-3',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
      {
        id: 'name-4',
        data: [
          'Name 4',
          'name-4',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-5',
        data: [
          'Name 5',
          'name-5',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-6',
        data: [
          'Name 6',
          'name-6',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
    ]
  }
}
<div class="chi-data-table">
  <div class="chi-data-table__head">
    <div class="chi-data-table__row">
      <button class="chi-data-table__cell -sorting">
        <div>Name</div>
        <i class="chi-icon -xs icon-arrow-sort" aria-hidden="true"></i>
      </button>
      <button class="chi-data-table__cell -sorting">
        <div>ID</div>
        <i class="chi-icon -xs icon-arrow-sort" aria-hidden="true"></i>
      </button>
      <button class="chi-data-table__cell -sorting">
        <div>Last Login</div>
        <i class="chi-icon -xs icon-arrow-sort" aria-hidden="true"></i>
      </button>
    </div>
  </div>
  <div class="chi-data-table__body">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 1</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-1</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 3:26 p.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 2</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-2</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 2:38 a.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 3</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-3</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>5 Nov 2020 10:15 a.m.</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__footer">
    <nav class="chi-pagination" role="navigation" aria-label="Pagination">
      <div class="chi-pagination__content">
        <div class="chi-pagination__start">
          <div class="chi-pagination__results">
            <span class="chi-pagination__label">240 results</span>
          </div>
          <div class="chi-pagination__page-size">
            <div class="chi-dropdown">
              <button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-10">20</button>
              <div class="chi-dropdown__menu -w--xs">
                <a class="chi-dropdown__menu-item -active" href="#">20</a>
                <a class="chi-dropdown__menu-item" href="#">40</a>
                <a class="chi-dropdown__menu-item" href="#">60</a>
                <a class="chi-dropdown__menu-item" href="#">80</a>
                <a class="chi-dropdown__menu-item" href="#">All</a>
              </div>
            </div>
            <span class="chi-pagination__label">per page</span>
          </div>
        </div>
        <div class="chi-pagination__center">
          <div class="chi-pagination__button-group chi-button-group">
            <button class="chi-button -icon -flat" aria-label="Previous page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
              </div>
            </button>
            <button class="chi-button -flat" aria-label="Page 1">1</button>
            <button class="chi-button -flat" aria-label="Page 2">2</button>
            <button class="chi-button -flat -active" aria-label="Page 3">3</button>
            <button class="chi-button -flat" aria-label="Page 4">4</button>
            <button class="chi-button -flat" aria-label="Page 5">5</button>
            <div class="chi-button -flat" aria-hidden="true" disabled>...</div>
            <button class="chi-button -flat" aria-label="Page 12">12</button>
            <button class="chi-button -icon -flat" aria-label="Next page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
              </div>
            </button>
          </div>
        </div>
        <div class="chi-pagination__end">
          <div class="chi-pagination__jumper">
            <label class="chi-pagination__label" for="jumper-input-10">Go to page:</label>
            <input class="chi-input" type="text" id="jumper-input-10" />
          </div>
        </div>
      </div>
    </nav>
  </div>
</div>

Default Sorting -- Ascending

Use sortBy and sortDataType properties to make the column sortable
<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>

<!-- Config and Data -->
data: {
  config: {
    columnResize: true,
    style: {
      portal: false,
      noBorder: false,
      bordered: false,
      hover: false,
      size: 'md',
      striped: false,
    },
      defaultSort: {
      key: 'name',
      direction: 'ascending',
      },
    pagination: {
      activePage: 1,
      compact: false,
      firstLast: false,
      pageJumper: true,
    },
    resultsPerPage: 3,
  },
  table: {
    head: {
      name: { label: 'Name', sortable: true, sortDataType: 'string' },
      id: { label: 'ID', sortable: true, sortDataType: 'string' },
      lastLogin: { label: 'Last Login', sortable: true, sortDatatype: 'date' },
    },
    body: [
      {
        id: 'name-1',
        data: [
          'Name 1',
          'name-1',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-2',
        data: [
          'Name 2',
          'name-2',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-3',
        data: [
          'Name 3',
          'name-3',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
      {
        id: 'name-4',
        data: [
          'Name 4',
          'name-4',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-5',
        data: [
          'Name 5',
          'name-5',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-6',
        data: [
          'Name 6',
          'name-6',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
    ]
  }
}
<div class="chi-data-table">
  <div class="chi-data-table__head">
    <div class="chi-data-table__row">
      <button class="chi-data-table__cell -sorting -active">
        <div>Name</div>
        <i class="chi-icon -xs icon-arrow-up" aria-hidden="true"></i>
      </button>
      <button class="chi-data-table__cell -sorting">
        <div>ID</div>
        <i class="chi-icon -xs icon-arrow-sort" aria-hidden="true"></i>
      </button>
      <button class="chi-data-table__cell -sorting">
        <div>Last Login</div>
        <i class="chi-icon -xs icon-arrow-sort" aria-hidden="true"></i>
      </button>
    </div>
  </div>
  <div class="chi-data-table__body">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 1</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-1</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 3:26 p.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 2</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-2</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 2:38 a.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 3</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-3</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>5 Nov 2020 10:15 a.m.</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__footer">
    <nav class="chi-pagination" role="navigation" aria-label="Pagination">
      <div class="chi-pagination__content">
        <div class="chi-pagination__start">
          <div class="chi-pagination__results">
            <span class="chi-pagination__label">240 results</span>
          </div>
          <div class="chi-pagination__page-size">
            <div class="chi-dropdown">
              <button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-11">20</button>
              <div class="chi-dropdown__menu -w--xs">
                <a class="chi-dropdown__menu-item -active" href="#">20</a>
                <a class="chi-dropdown__menu-item" href="#">40</a>
                <a class="chi-dropdown__menu-item" href="#">60</a>
                <a class="chi-dropdown__menu-item" href="#">80</a>
                <a class="chi-dropdown__menu-item" href="#">All</a>
              </div>
            </div>
            <span class="chi-pagination__label">per page</span>
          </div>
        </div>
        <div class="chi-pagination__center">
          <div class="chi-pagination__button-group chi-button-group">
            <button class="chi-button -icon -flat" aria-label="Previous page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
              </div>
            </button>
            <button class="chi-button -flat" aria-label="Page 1">1</button>
            <button class="chi-button -flat" aria-label="Page 2">2</button>
            <button class="chi-button -flat -active" aria-label="Page 3">3</button>
            <button class="chi-button -flat" aria-label="Page 4">4</button>
            <button class="chi-button -flat" aria-label="Page 5">5</button>
            <div class="chi-button -flat" aria-hidden="true" disabled>...</div>
            <button class="chi-button -flat" aria-label="Page 12">12</button>
            <button class="chi-button -icon -flat" aria-label="Next page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
              </div>
            </button>
          </div>
        </div>
        <div class="chi-pagination__end">
          <div class="chi-pagination__jumper">
            <label class="chi-pagination__label" for="jumper-input-11">Go to page:</label>
            <input class="chi-input" type="text" id="jumper-input-11" />
          </div>
        </div>
      </div>
    </nav>
  </div>
</div>

Default Sorting -- Descending

Use sortBy and sortDataType properties to make the column sortable
<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>

<!-- Config and Data -->
data: {
  config: {
    columnResize: true,
    style: {
      portal: false,
      noBorder: false,
      bordered: false,
      hover: false,
      size: 'md',
      striped: false,
    },
    defaultSort: {
      key: 'name',
      direction: 'descending',
    },
    pagination: {
      activePage: 1,
      compact: false,
      firstLast: false,
      pageJumper: true,
    },
    resultsPerPage: 3,
  },
  table: {
    head: {
      name: { label: 'Name', sortable: true, sortDataType: 'string' },
      id: { label: 'ID', sortable: true, sortDataType: 'string' },
      lastLogin: { label: 'Last Login', sortable: true, sortDatatype: 'date' },
    },
    body: [
      {
        id: 'name-1',
        data: [
          'Name 1',
          'name-1',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-2',
        data: [
          'Name 2',
          'name-2',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-3',
        data: [
          'Name 3',
          'name-3',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
      {
        id: 'name-4',
        data: [
          'Name 4',
          'name-4',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-5',
        data: [
          'Name 5',
          'name-5',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-6',
        data: [
          'Name 6',
          'name-6',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
    ]
  }
}
<div class="chi-data-table">
  <div class="chi-data-table__head">
    <div class="chi-data-table__row">
      <button class="chi-data-table__cell -sorting -active -descending">
        <div>Name</div>
        <i class="chi-icon -xs icon-arrow-up" aria-hidden="true"></i>
      </button>
      <button class="chi-data-table__cell -sorting">
        <div>ID</div>
        <i class="chi-icon -xs icon-arrow-sort" aria-hidden="true"></i>
      </button>
      <button class="chi-data-table__cell -sorting">
        <div>Last Login</div>
        <i class="chi-icon -xs icon-arrow-sort" aria-hidden="true"></i>
      </button>
    </div>
  </div>
  <div class="chi-data-table__body">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 1</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-1</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 3:26 p.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 2</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-2</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 2:38 a.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 3</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-3</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>5 Nov 2020 10:15 a.m.</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__footer">
    <nav class="chi-pagination" role="navigation" aria-label="Pagination">
      <div class="chi-pagination__content">
        <div class="chi-pagination__start">
          <div class="chi-pagination__results">
            <span class="chi-pagination__label">240 results</span>
          </div>
          <div class="chi-pagination__page-size">
            <div class="chi-dropdown">
              <button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-12">20</button>
              <div class="chi-dropdown__menu -w--xs">
                <a class="chi-dropdown__menu-item -active" href="#">20</a>
                <a class="chi-dropdown__menu-item" href="#">40</a>
                <a class="chi-dropdown__menu-item" href="#">60</a>
                <a class="chi-dropdown__menu-item" href="#">80</a>
                <a class="chi-dropdown__menu-item" href="#">All</a>
              </div>
            </div>
            <span class="chi-pagination__label">per page</span>
          </div>
        </div>
        <div class="chi-pagination__center">
          <div class="chi-pagination__button-group chi-button-group">
            <button class="chi-button -icon -flat" aria-label="Previous page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
              </div>
            </button>
            <button class="chi-button -flat" aria-label="Page 1">1</button>
            <button class="chi-button -flat" aria-label="Page 2">2</button>
            <button class="chi-button -flat -active" aria-label="Page 3">3</button>
            <button class="chi-button -flat" aria-label="Page 4">4</button>
            <button class="chi-button -flat" aria-label="Page 5">5</button>
            <div class="chi-button -flat" aria-hidden="true" disabled>...</div>
            <button class="chi-button -flat" aria-label="Page 12">12</button>
            <button class="chi-button -icon -flat" aria-label="Next page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
              </div>
            </button>
          </div>
        </div>
        <div class="chi-pagination__end">
          <div class="chi-pagination__jumper">
            <label class="chi-pagination__label" for="jumper-input-12">Go to page:</label>
            <input class="chi-input" type="text" id="jumper-input-12" />
          </div>
        </div>
      </div>
    </nav>
  </div>
</div>

Size -xs

<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>

<!-- Config and Data -->
data: {
  config: {
    columnResize: true,
    style: {
      portal: false,
      noBorder: false,
      bordered: false,
      hover: false,
      size: 'xs',
      striped: false,
    },
    pagination: {
      activePage: 1,
      compact: false,
      firstLast: false,
      pageJumper: true,
    },
    resultsPerPage: 3,
  },
  table: {
    head: {
      name: { label: 'Name' },
      id: { label: 'ID' },
      lastLogin: { label: 'Last Login' },
    },
    body: [
      {
        id: 'name-1',
        data: [
          'Name 1',
          'name-1',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-2',
        data: [
          'Name 2',
          'name-2',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-3',
        data: [
          'Name 3',
          'name-3',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
      {
        id: 'name-4',
        data: [
          'Name 4',
          'name-4',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-5',
        data: [
          'Name 5',
          'name-5',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-6',
        data: [
          'Name 6',
          'name-6',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
    ]
  }
}
<div class="chi-data-table -xs">
  <div class="chi-data-table__head">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell">
        <div>Name</div>
      </div>
      <div class="chi-data-table__cell">
        <div>ID</div>
      </div>
      <div class="chi-data-table__cell">
        <div>Last Login</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__body">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 1</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-1</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 3:26 p.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 2</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-2</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 2:38 a.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 3</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-3</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>5 Nov 2020 10:15 a.m.</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__footer">
    <nav class="chi-pagination" role="navigation" aria-label="Pagination">
      <div class="chi-pagination__content">
        <div class="chi-pagination__start">
          <div class="chi-pagination__results">
            <span class="chi-pagination__label">240 results</span>
          </div>
          <div class="chi-pagination__page-size">
            <div class="chi-dropdown">
              <button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-13">20</button>
              <div class="chi-dropdown__menu -w--xs">
              <a class="chi-dropdown__menu-item -active" href="#">20</a>
              <a class="chi-dropdown__menu-item" href="#">40</a>
              <a class="chi-dropdown__menu-item" href="#">60</a>
              <a class="chi-dropdown__menu-item" href="#">80</a>
              <a class="chi-dropdown__menu-item" href="#">All</a>
            </div>
            </div>
            <span class="chi-pagination__label">per page</span>
          </div>
        </div>
        <div class="chi-pagination__center">
          <div class="chi-pagination__button-group chi-button-group">
            <button class="chi-button -icon -flat" aria-label="Previous page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
              </div>
            </button>
            <button class="chi-button -flat" aria-label="Page 1">1</button>
            <button class="chi-button -flat" aria-label="Page 2">2</button>
            <button class="chi-button -flat -active" aria-label="Page 3">3</button>
            <button class="chi-button -flat" aria-label="Page 4">4</button>
            <button class="chi-button -flat" aria-label="Page 5">5</button>
            <div class="chi-button -flat" aria-hidden="true" disabled>...</div>
            <button class="chi-button -flat" aria-label="Page 12">12</button>
            <button class="chi-button -icon -flat" aria-label="Next page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
              </div>
            </button>
          </div>
        </div>
        <div class="chi-pagination__end">
          <div class="chi-pagination__jumper">
            <label class="chi-pagination__label" for="jumper-input-13">Go to page:</label>
            <input class="chi-input" type="text" id="jumper-input-13" />
          </div>
        </div>
      </div>
    </nav>
  </div>
</div>

Size -sm

<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>

<!-- Config and Data -->
data: {
  config: {
    columnResize: true,
    style: {
      portal: false,
      noBorder: false,
      bordered: false,
      hover: false,
      size: 'sm',
      striped: false,
    },
    pagination: {
      activePage: 1,
      compact: false,
      firstLast: false,
      pageJumper: true,
    },
    resultsPerPage: 3,
  },
  table: {
    head: {
      name: { label: 'Name' },
      id: { label: 'ID' },
      lastLogin: { label: 'Last Login' },
    },
    body: [
      {
        id: 'name-1',
        data: [
          'Name 1',
          'name-1',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-2',
        data: [
          'Name 2',
          'name-2',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-3',
        data: [
          'Name 3',
          'name-3',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
      {
        id: 'name-4',
        data: [
          'Name 4',
          'name-4',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-5',
        data: [
          'Name 5',
          'name-5',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-6',
        data: [
          'Name 6',
          'name-6',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
    ]
  }
}
<div class="chi-data-table -sm">
  <div class="chi-data-table__head">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell">
        <div>Name</div>
      </div>
      <div class="chi-data-table__cell">
        <div>ID</div>
      </div>
      <div class="chi-data-table__cell">
        <div>Last Login</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__body">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 1</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-1</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 3:26 p.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 2</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-2</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 2:38 a.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 3</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-3</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>5 Nov 2020 10:15 a.m.</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__footer">
    <nav class="chi-pagination" role="navigation" aria-label="Pagination">
      <div class="chi-pagination__content">
        <div class="chi-pagination__start">
          <div class="chi-pagination__results">
            <span class="chi-pagination__label">240 results</span>
          </div>
          <div class="chi-pagination__page-size">
            <div class="chi-dropdown">
              <button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-14">20</button>
              <div class="chi-dropdown__menu -w--xs">
                <a class="chi-dropdown__menu-item -active" href="#">20</a>
                <a class="chi-dropdown__menu-item" href="#">40</a>
                <a class="chi-dropdown__menu-item" href="#">60</a>
                <a class="chi-dropdown__menu-item" href="#">80</a>
                <a class="chi-dropdown__menu-item" href="#">All</a>
              </div>
            </div>
            <span class="chi-pagination__label">per page</span>
          </div>
        </div>
        <div class="chi-pagination__center">
          <div class="chi-pagination__button-group chi-button-group">
            <button class="chi-button -icon -flat" aria-label="Previous page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
              </div>
            </button>
            <button class="chi-button -flat" aria-label="Page 1">1</button>
            <button class="chi-button -flat" aria-label="Page 2">2</button>
            <button class="chi-button -flat -active" aria-label="Page 3">3</button>
            <button class="chi-button -flat" aria-label="Page 4">4</button>
            <button class="chi-button -flat" aria-label="Page 5">5</button>
            <div class="chi-button -flat" aria-hidden="true" disabled>...</div>
            <button class="chi-button -flat" aria-label="Page 12">12</button>
            <button class="chi-button -icon -flat" aria-label="Next page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
              </div>
            </button>
          </div>
        </div>
        <div class="chi-pagination__end">
          <div class="chi-pagination__jumper">
            <label class="chi-pagination__label" for="jumper-input-14">Go to page:</label>
            <input class="chi-input" type="text" id="jumper-input-14" />
          </div>
        </div>
      </div>
    </nav>
  </div>
</div>

Size -md

<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>

<!-- Config and Data -->
data: {
  config: {
    columnResize: true,
    style: {
      portal: false,
      noBorder: false,
      bordered: false,
      hover: false,
      size: 'md',
      striped: false,
    },
    pagination: {
      activePage: 1,
      compact: false,
      firstLast: false,
      pageJumper: true,
    },
    resultsPerPage: 3,
  },
  table: {
    head: {
      name: { label: 'Name' },
      id: { label: 'ID' },
      lastLogin: { label: 'Last Login' },
    },
    body: [
      {
        id: 'name-1',
        data: [
          'Name 1',
          'name-1',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-2',
        data: [
          'Name 2',
          'name-2',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-3',
        data: [
          'Name 3',
          'name-3',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
      {
        id: 'name-4',
        data: [
          'Name 4',
          'name-4',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-5',
        data: [
          'Name 5',
          'name-5',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-6',
        data: [
          'Name 6',
          'name-6',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
    ]
  }
}
<div class="chi-data-table -md">
  <div class="chi-data-table__head">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell">
        <div>Name</div>
      </div>
      <div class="chi-data-table__cell">
        <div>ID</div>
      </div>
      <div class="chi-data-table__cell">
        <div>Last Login</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__body">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 1</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-1</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 3:26 p.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 2</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-2</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 2:38 a.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 3</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-3</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>5 Nov 2020 10:15 a.m.</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__footer">
    <nav class="chi-pagination" role="navigation" aria-label="Pagination">
      <div class="chi-pagination__content">
        <div class="chi-pagination__start">
          <div class="chi-pagination__results">
            <span class="chi-pagination__label">240 results</span>
          </div>
          <div class="chi-pagination__page-size">
            <div class="chi-dropdown">
              <button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-15">20</button>
              <div class="chi-dropdown__menu -w--xs">
                <a class="chi-dropdown__menu-item -active" href="#">20</a>
                <a class="chi-dropdown__menu-item" href="#">40</a>
                <a class="chi-dropdown__menu-item" href="#">60</a>
                <a class="chi-dropdown__menu-item" href="#">80</a>
                <a class="chi-dropdown__menu-item" href="#">All</a>
              </div>
            </div>
            <span class="chi-pagination__label">per page</span>
          </div>
        </div>
        <div class="chi-pagination__center">
          <div class="chi-pagination__button-group chi-button-group">
            <button class="chi-button -icon -flat" aria-label="Previous page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
              </div>
            </button>
            <button class="chi-button -flat" aria-label="Page 1">1</button>
            <button class="chi-button -flat" aria-label="Page 2">2</button>
            <button class="chi-button -flat -active" aria-label="Page 3">3</button>
            <button class="chi-button -flat" aria-label="Page 4">4</button>
            <button class="chi-button -flat" aria-label="Page 5">5</button>
            <div class="chi-button -flat" aria-hidden="true" disabled>...</div>
            <button class="chi-button -flat" aria-label="Page 12">12</button>
            <button class="chi-button -icon -flat" aria-label="Next page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
              </div>
            </button>
          </div>
        </div>
        <div class="chi-pagination__end">
          <div class="chi-pagination__jumper">
            <label class="chi-pagination__label" for="jumper-input-15">Go to page:</label>
            <input class="chi-input" type="text" id="jumper-input-15"/>
          </div>
        </div>
      </div>
    </nav>
  </div>
</div>

Size -lg

<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>

<!-- Config and Data -->
data: {
  config: {
    columnResize: true,
    style: {
      portal: false,
      noBorder: false,
      bordered: false,
      hover: false,
      size: 'lg',
      striped: false,
    },
    pagination: {
      activePage: 1,
      compact: false,
      firstLast: false,
      pageJumper: true,
    },
    resultsPerPage: 3,
  },
  table: {
    head: {
      name: { label: 'Name' },
      id: { label: 'ID' },
      lastLogin: { label: 'Last Login' },
    },
    body: [
      {
        id: 'name-1',
        data: [
          'Name 1',
          'name-1',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-2',
        data: [
          'Name 2',
          'name-2',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-3',
        data: [
          'Name 3',
          'name-3',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
      {
        id: 'name-4',
        data: [
          'Name 4',
          'name-4',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-5',
        data: [
          'Name 5',
          'name-5',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-6',
        data: [
          'Name 6',
          'name-6',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
    ]
  }
}
<div class="chi-data-table -lg">
  <div class="chi-data-table__head">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell">
        <div>Name</div>
      </div>
      <div class="chi-data-table__cell">
        <div>ID</div>
      </div>
      <div class="chi-data-table__cell">
        <div>Last Login</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__body">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 1</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-1</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 3:26 p.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 2</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-2</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 2:38 a.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 3</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-3</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>5 Nov 2020 10:15 a.m.</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__footer">
    <nav class="chi-pagination" role="navigation" aria-label="Pagination">
      <div class="chi-pagination__content">
        <div class="chi-pagination__start">
          <div class="chi-pagination__results">
            <span class="chi-pagination__label">240 results</span>
          </div>
          <div class="chi-pagination__page-size">
            <div class="chi-dropdown">
              <button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-16">20</button>
              <div class="chi-dropdown__menu -w--xs">
                <a class="chi-dropdown__menu-item -active" href="#">20</a>
                <a class="chi-dropdown__menu-item" href="#">40</a>
                <a class="chi-dropdown__menu-item" href="#">60</a>
                <a class="chi-dropdown__menu-item" href="#">80</a>
                <a class="chi-dropdown__menu-item" href="#">All</a>
              </div>
            </div>
            <span class="chi-pagination__label">per page</span>
          </div>
        </div>
        <div class="chi-pagination__center">
          <div class="chi-pagination__button-group chi-button-group">
            <button class="chi-button -icon -flat" aria-label="Previous page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
              </div>
            </button>
            <button class="chi-button -flat" aria-label="Page 1">1</button>
            <button class="chi-button -flat" aria-label="Page 2">2</button>
            <button class="chi-button -flat -active" aria-label="Page 3">3</button>
            <button class="chi-button -flat" aria-label="Page 4">4</button>
            <button class="chi-button -flat" aria-label="Page 5">5</button>
            <div class="chi-button -flat" aria-hidden="true" disabled>...</div>
            <button class="chi-button -flat" aria-label="Page 12">12</button>
            <button class="chi-button -icon -flat" aria-label="Next page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
              </div>
            </button>
          </div>
        </div>
        <div class="chi-pagination__end">
          <div class="chi-pagination__jumper">
            <label class="chi-pagination__label" for="jumper-input-16">Go to page:</label>
            <input class="chi-input" type="text" id="jumper-input-16" />
          </div>
        </div>
      </div>
    </nav>
  </div>
</div>

Size -xl

<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>

<!-- Config and Data -->
data: {
  config: {
    columnResize: true,
    style: {
      portal: false,
      noBorder: false,
      bordered: false,
      hover: false,
      size: 'xl',
      striped: false,
    },
    pagination: {
      activePage: 1,
      compact: false,
      firstLast: false,
      pageJumper: true,
    },
    resultsPerPage: 3,
  },
  table: {
    head: {
      name: { label: 'Name' },
      id: { label: 'ID' },
      lastLogin: { label: 'Last Login' },
    },
    body: [
      {
        id: 'name-1',
        data: [
          'Name 1',
          'name-1',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-2',
        data: [
          'Name 2',
          'name-2',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-3',
        data: [
          'Name 3',
          'name-3',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
      {
        id: 'name-4',
        data: [
          'Name 4',
          'name-4',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-5',
        data: [
          'Name 5',
          'name-5',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-6',
        data: [
          'Name 6',
          'name-6',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
    ]
  }
}
<div class="chi-data-table -xl">
  <div class="chi-data-table__head">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell">
        <div>Name</div>
      </div>
      <div class="chi-data-table__cell">
        <div>ID</div>
      </div>
      <div class="chi-data-table__cell">
        <div>Last Login</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__body">
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 1</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-1</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 3:26 p.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 2</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-2</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>18 Dec 2020 2:38 a.m.</div>
      </div>
    </div>
    <div class="chi-data-table__row">
      <div class="chi-data-table__cell" data-label="Name">
        <div>Name 3</div>
      </div>
      <div class="chi-data-table__cell" data-label="ID">
        <div>name-3</div>
      </div>
      <div class="chi-data-table__cell" data-label="Last Login">
        <div>5 Nov 2020 10:15 a.m.</div>
      </div>
    </div>
  </div>
  <div class="chi-data-table__footer">
    <nav class="chi-pagination" role="navigation" aria-label="Pagination">
      <div class="chi-pagination__content">
        <div class="chi-pagination__start">
          <div class="chi-pagination__results">
            <span class="chi-pagination__label">240 results</span>
          </div>
          <div class="chi-pagination__page-size">
            <div class="chi-dropdown">
              <button class="chi-button -flat -px--1 chi-dropdown__trigger" id="pagesize-17">20</button>
              <div class="chi-dropdown__menu -w--xs">
                <a class="chi-dropdown__menu-item -active" href="#">20</a>
                <a class="chi-dropdown__menu-item" href="#">40</a>
                <a class="chi-dropdown__menu-item" href="#">60</a>
                <a class="chi-dropdown__menu-item" href="#">80</a>
                <a class="chi-dropdown__menu-item" href="#">All</a>
              </div>
            </div>
            <span class="chi-pagination__label">per page</span>
          </div>
        </div>
        <div class="chi-pagination__center">
          <div class="chi-pagination__button-group chi-button-group">
            <button class="chi-button -icon -flat" aria-label="Previous page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
              </div>
            </button>
            <button class="chi-button -flat" aria-label="Page 1">1</button>
            <button class="chi-button -flat" aria-label="Page 2">2</button>
            <button class="chi-button -flat -active" aria-label="Page 3">3</button>
            <button class="chi-button -flat" aria-label="Page 4">4</button>
            <button class="chi-button -flat" aria-label="Page 5">5</button>
            <div class="chi-button -flat" aria-hidden="true" disabled>...</div>
            <button class="chi-button -flat" aria-label="Page 12">12</button>
            <button class="chi-button -icon -flat" aria-label="Next page">
              <div class="chi-button__content">
                <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
              </div>
            </button>
          </div>
        </div>
        <div class="chi-pagination__end">
          <div class="chi-pagination__jumper">
            <label class="chi-pagination__label" for="jumper-input-17">Go to page:</label>
            <input class="chi-input" type="text" id="jumper-input-17" />
          </div>
        </div>
      </div>
    </nav>
  </div>
</div>

Complex

Title
Create reusable Vue components based on your needs and use them as custom templates for Data Table cells and row accordions
<!-- Vue component -->
<ChiDataTable :config="config" :data="table" ref="dataTableComplex">
  <template #status="payload">
    <i class="`chi-icon icon-${payload.icon} -icon--${payload.color}`" aria-hidden="true"></i>
    <span class="-text--truncate" style="padding-left: 0.5rem;">
      {{ payload.status }}
    </span>
  </template>
  <template #name="payload">
    <ExamplePopover :name="payload.name" :id="payload.id" />
  </template>
  <template #actions="payload">
    <ExampleDropdown :id="payload.id" />
  </template>
  <template #toolbar>
    <ChiToolbar>
      <template v-slot:start></template>
      <template v-slot:end>
        <chi-button @chiClick="printTable" variant="flat" type="icon" aria-label="Print data table complex example">
          <chi-icon icon="print"></chi-icon>
        </chi-button>
      </template>
    </ChiToolbar>
  </template>
  <template #bulkActions>
    <div class="chi-bulk-actions__buttons">
      <div class="chi-bulk-actions__buttons-mobile -z--40">
        <chi-button variant="flat" type="icon" aria-label="Edit">
          <chi-icon icon="edit"></chi-icon>
        </chi-button>
        <chi-button variant="flat" type="icon" aria-label="Compose">
          <chi-icon icon="compose"></chi-icon>
        </chi-button>
        <chi-button variant="flat" type="icon" aria-label="Delete">
          <chi-icon icon="delete"></chi-icon>
        </chi-button>
        <chi-button variant="flat" type="icon" aria-label="Print">
          <chi-icon icon="print"></chi-icon>
        </chi-button>
      </div>
      <div class="chi-bulk-actions__buttons-desktop">
        <chi-button size="xs" aria-label="Download">
          <chi-icon icon="arrow-to-bottom"></chi-icon>
          <span> Download </span>
        </chi-button>
        <chi-button size="xs" aria-label="Compose">
          <chi-icon icon="arrow-to-bottom"></chi-icon>
          <span> Compose </span>
        </chi-button>
        <chi-button size="xs" aria-label="Delete">
          <chi-icon icon="arrow-to-bottom"></chi-icon>
          <span> Delete </span>
        </chi-button>
        <chi-button size="xs" aria-label="Print">
          <chi-icon icon="arrow-to-bottom"></chi-icon>
          <span> Print </span>
        </chi-button>
      </div>
    </div>
  </template>
</ChiDataTable>

<!-- imports -->
import ExamplePopover from './ExamplePopover.vue';
import ExampleDropdown from './ExampleDropdown.vue';

<!-- Config and Data -->
data: {
  config: {
    columnResize: false,
    selectable: true,
    style: {
      portal: true,
      noBorder: false,
      bordered: false,
      hover: false,
      size: 'md',
      striped: true,
    },
    pagination: {
      activePage: 1,
      compact: true,
      firstLast: true,
      pageJumper: false,
    },
    resultsPerPage: 3,
    defaultSort: {
      key: 'name',
      sortBy: 'string',
      direction: 'ascending',
    },
    showExpandAll: true,
    showSelectAllDropdown: true,
  },
  table: {
    head: {
      name: { label: 'Name', sortable: true, sortBy: 'name', sortDataType: 'string', key: true, bold: true },
      status: { label: 'Status', sortable: true, sortBy: 'status', sortDataType: 'string',
        description: 'Helpful information goes here.' },
      lastLogin: { label: 'Last Login', key: true },
      actions: { label: 'Actions', align: 'right', isPrintDisabled: true },
    },
    body: [
      {
        expanded: true,
        id: "name-1",
        data: [
          { template: "name", payload: { name: "Name 1", id: "name-1" } },
          {
            template: "status",
            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
          },
          "18 Dec 2020 3:26 p.m.",
          {
            template: "actions",
            payload: { id: "name-1" },
          },
        ],
        nestedContent: {
          table: {
            data: [
              {
                id: "child-1-name-1",
                data: [
                  "Child 1 Name 1",
                  {
                    template: "status",
                    payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                  },
                  "18 Dec 2020 2:38 a.m.",
                  {
                    template: "actions",
                    payload: { id: "child-1-name-1" },
                  },
                ],
                nestedContent: {
                  table: {
                    data: [
                      {
                        id: "grandchild-1-name-1",
                        data: [
                          "Grand Child 1 Name 1",
                          {
                            template: "status",
                            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-1-name-1" },
                          },
                        ],
                      },
                      {
                        id: "grandchild-2-name-1",
                        data: [
                          "Grand Child 2 Name 1",
                          {
                            template: "status",
                            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-2-name-1" },
                          },
                        ],
                      },
                    ],
                  },
                },
              },
              {
                id: "child-2-name-1",
                data: [
                  "Child 2 Name 1",
                  {
                    template: "status",
                    payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                  },
                  "18 Dec 2020 2:38 a.m.",
                  {
                    template: "actions",
                    payload: { id: "child-2-name-1" },
                  },
                ],
                nestedContent: {
                  table: {
                    data: [
                      {
                        id: "grandchild-3-name-1",
                        data: [
                          "Grand Child 3 Name 1",
                          {
                            template: "status",
                            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-3-name-1" },
                          },
                        ],
                      },
                      {
                        id: "grandchild-4-name-1",
                        data: [
                          "Grand Child 4 Name 1",
                          {
                            template: "status",
                            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-4-name-1" },
                          },
                        ],
                      },
                    ],
                  },
                },
              },
            ],
          },
        },
      },
      {
        id: "name-2",
        data: [
          { template: "name", payload: { name: "Name 2", id: "name-2" } },
          {
            template: "status",
            payload: { status: "Due", icon: 'warning', color: 'warning' },
          },
          "18 Dec 2020 3:26 p.m.",
          {
            template: "actions",
            payload: { id: "name-2" },
          },
        ],
        nestedContent: {
          table: {
            data: [
              {
                id: "child-1-name-2",
                data: [
                  "Child 1 Name 2",
                  {
                    template: "status",
                    payload: { status: "Due", icon: 'warning', color: 'warning' },
                  },
                  "18 Dec 2020 2:38 a.m.",
                  {
                    template: "actions",
                    payload: { id: "child-1-name-2" },
                  },
                ],
                nestedContent: {
                  table: {
                    data: [
                      {
                        id: "grandchild-1-name-2",
                        data: [
                          "Grand Child 1 Name 2",
                          {
                            template: "status",
                            payload: { status: "Due", icon: 'warning', color: 'warning' },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-1-name-2" },
                          },
                        ],
                      },
                      {
                        id: "grandchild-2-name-2",
                        data: [
                          "Grand Child 2 Name 2",
                          {
                            template: "status",
                            payload: { status: "Due", icon: 'warning', color: 'warning' },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-2-name-2" },
                          },
                        ],
                      },
                    ],
                  },
                },
              },
              {
                id: "child-2-name-2",
                data: [
                  "Child 2 Name 2",
                  {
                    template: "status",
                    payload: { status: "Due", icon: 'warning', color: 'warning' },
                  },
                  "18 Dec 2020 2:38 a.m.",
                  {
                    template: "actions",
                    payload: { id: "child-2-name-2" },
                  },
                ],
                nestedContent: {
                  table: {
                    data: [
                      {
                        id: "grandchild-3-name-2",
                        data: [
                          "Grand Child 3 Name 2",
                          {
                            template: "status",
                            payload: { status: "Due", icon: 'warning', color: 'warning' },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-3-name-2" },
                          },
                        ],
                      },
                      {
                        id: "grandchild-4-name-2",
                        data: [
                          "Grand Child 4 Name 2",
                          {
                            template: "status",
                            payload: { status: "Due", icon: 'warning', color: 'warning' },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-4-name-2" },
                          },
                        ],
                      },
                    ],
                  },
                },
              },
            ],
          },
        },
      },
      {
        id: "name-3",
        data: [
          {
            template: "name",
            payload: {
              name: "Name 3",
              id: "name-3",
            },
          },
          {
            template: "status",
            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
          },
          "18 Dec 2020 3:26 p.m.",
          {
            template: "actions",
            payload: {
              id: "name-3",
            },
          },
        ],
        nestedContent: {
          table: {
            data: [
              {
                id: "child-1-name-3",
                data: [
                  "Child 1 Name 3",
                  {
                    template: "status",
                    payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                  },
                  "18 Dec 2020 2:38 a.m.",
                  {
                    template: "actions",
                    payload: { id: "child-1-name-3" },
                  },
                ],
                nestedContent: {
                  table: {
                    data: [
                      {
                        id: "grandchild-1-name-3",
                        data: [
                          "Grand Child 1 Name 3",
                          {
                            template: "status",
                            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-1-name-3" },
                          },
                        ],
                      },
                      {
                        id: "grandchild-2-name-3",
                        data: [
                          "Grand Child 2 Name 3",
                          {
                            template: "status",
                            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-2-name-3" },
                          },
                        ],
                      },
                    ],
                  },
                },
              },
              {
                id: "child-2-name-3",
                data: [
                  "Child 2 Name 3",
                  {
                    template: "status",
                    payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                  },
                  "18 Dec 2020 2:38 a.m.",
                  {
                    template: "actions",
                    payload: { id: "child-2-name-3" },
                  },
                ],
                nestedContent: {
                  table: {
                    data: [
                      {
                        id: "grandchild-3-name-3",
                        data: [
                          "Grand Child 3 Name 3",
                          {
                            template: "status",
                            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-3-name-3" },
                          },
                        ],
                      },
                      {
                        id: "grandchild-4-name-3",
                        data: [
                          "Grand Child 4 Name 3",
                          {
                            template: "status",
                            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-4-name-3" },
                          },
                        ],
                      },
                    ],
                  },
                },
              },
            ],
          },
        },
      },
      {
        id: "name-4",
        data: [
          {
            template: "name",
            payload: {
              name: "Name 4",
              id: "name-4",
            },
          },
          {
            template: "status",
            payload: { status: "Due", icon: 'warning', color: 'warning' },
          },
          "18 Dec 2020 3:26 p.m.",
          {
            template: "actions",
            payload: {
              id: "name-4",
            },
          },
        ],
        nestedContent: {
          table: {
            data: [
              {
                id: "child-1-name-4",
                data: [
                  "Child 1 Name 4",
                  {
                    template: "status",
                    payload: { status: "Due", icon: 'warning', color: 'warning' },
                  },
                  "18 Dec 2020 2:38 a.m.",
                  {
                    template: "actions",
                    payload: { id: "child-1-name-4" },
                  },
                ],
                nestedContent: {
                  table: {
                    data: [
                      {
                        id: "grandchild-1-name-4",
                        data: [
                          "Grand Child 1 Name 4",
                          {
                            template: "status",
                            payload: { status: "Due", icon: 'warning', color: 'warning' },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-1-name-4" },
                          },
                        ],
                      },
                      {
                        id: "grandchild-2-name-4",
                        data: [
                          "Grand Child 2 Name 4",
                          {
                            template: "status",
                            payload: { status: "Due", icon: 'warning', color: 'warning' },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-2-name-4" },
                          },
                        ],
                      },
                    ],
                  },
                },
              },
              {
                id: "child-2-name-4",
                data: [
                  "Child 2 Name 4",
                  {
                    template: "status",
                    payload: { status: "Due", icon: 'warning', color: 'warning' },
                  },
                  "18 Dec 2020 2:38 a.m.",
                  {
                    template: "actions",
                    payload: { id: "child-2-name-4" },
                  },
                ],
                nestedContent: {
                  table: {
                    data: [
                      {
                        id: "grandchild-3-name-4",
                        data: [
                          "Grand Child 3 Name 4",
                          {
                            template: "status",
                            payload: { status: "Due", icon: 'warning', color: 'warning' },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-3-name-4" },
                          },
                        ],
                      },
                      {
                        id: "grandchild-4-name-4",
                        data: [
                          "Grand Child 4 Name 4",
                          {
                            template: "status",
                            payload: { status: "Due", icon: 'warning', color: 'warning' },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-4-name-4" },
                          },
                        ],
                      },
                    ],
                  },
                },
              },
            ],
          },
        },
      },
      {
        id: "name-5",
        data: [
          {
            template: "name",
            payload: {
              name: "Name 5",
              id: "name-5",
            },
          },
          {
            template: "status",
            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
          },
          "18 Dec 2020 3:26 p.m.",
          {
            template: "actions",
            payload: {
              id: "name-5",
            },
          },
        ],
        nestedContent: {
          table: {
            data: [
              {
                id: "child-1-name-5",
                data: [
                  "Child 1 Name 5",
                  {
                    template: "status",
                    payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                  },
                  "18 Dec 2020 2:38 a.m.",
                  {
                    template: "actions",
                    payload: { id: "child-1-name-5" },
                  },
                ],
                nestedContent: {
                  table: {
                    data: [
                      {
                        id: "grandchild-1-name-5",
                        data: [
                          "Grand Child 1 Name 5",
                          {
                            template: "status",
                            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-1-name-5" },
                          },
                        ],
                      },
                      {
                        id: "grandchild-2-name-5",
                        data: [
                          "Grand Child 2 Name 5",
                          {
                            template: "status",
                            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-2-name-5" },
                          },
                        ],
                      },
                    ],
                  },
                },
              },
              {
                id: "child-2-name-5",
                data: [
                  "Child 2 Name 5",
                  {
                    template: "status",
                    payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                  },
                  "18 Dec 2020 2:38 a.m.",
                  {
                    template: "actions",
                    payload: { id: "child-2-name-5" },
                  },
                ],
                nestedContent: {
                  table: {
                    data: [
                      {
                        id: "grandchild-3-name-5",
                        data: [
                          "Grand Child 3 Name 5",
                          {
                            template: "status",
                            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-3-name-5" },
                          },
                        ],
                      },
                      {
                        id: "grandchild-4-name-5",
                        data: [
                          "Grand Child 4 Name 5",
                          {
                            template: "status",
                            payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-4-name-5" },
                          },
                        ],
                      },
                    ],
                  },
                },
              },
            ],
          },
        },
      },
      {
        id: "name-6",
        data: [
          {
            template: "name",
            payload: {
              name: "Name 6",
              id: "name-6",
            },
          },
          {
            template: "status",
            payload: { status: "Due", icon: 'warning', color: 'warning' },
          },
          "18 Dec 2020 3:26 p.m.",
          {
            template: "actions",
            payload: {
              id: "name-6",
            },
          },
        ],
        nestedContent: {
          table: {
            data: [
              {
                id: "child-1-name-6",
                data: [
                  "Child 1 Name 6",
                  {
                    template: "status",
                    payload: { status: "Due", icon: 'warning', color: 'warning' },
                  },
                  "18 Dec 2020 2:38 a.m.",
                  {
                    template: "actions",
                    payload: { id: "child-1-name-6" },
                  },
                ],
                nestedContent: {
                  table: {
                    data: [
                      {
                        id: "grandchild-1-name-6",
                        data: [
                          "Grand Child 1 Name 6",
                          {
                            template: "status",
                            payload: { status: "Due", icon: 'warning', color: 'warning' },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-1-name-6" },
                          },
                        ],
                      },
                      {
                        id: "grandchild-2-name-6",
                        data: [
                          "Grand Child 2 Name 6",
                          {
                            template: "status",
                            payload: { status: "Due", icon: 'warning', color: 'warning' },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-2-name-6" },
                          },
                        ],
                      },
                    ],
                  },
                },
              },
              {
                id: "child-2-name-6",
                data: [
                  "Child 2 Name 6",
                  {
                    template: "status",
                    payload: { status: "Due", icon: 'warning', color: 'warning' },
                  },
                  "18 Dec 2020 2:38 a.m.",
                  {
                    template: "actions",
                    payload: { id: "child-2-name-6" },
                  },
                ],
                nestedContent: {
                  table: {
                    data: [
                      {
                        id: "grandchild-3-name-6",
                        data: [
                          "Grand Child 3 Name 6",
                          {
                            template: "status",
                            payload: { status: "Due", icon: 'warning', color: 'warning' },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-3-name-6" },
                          },
                        ],
                      },
                      {
                        id: "grandchild-4-name-6",
                        data: [
                          "Grand Child 4 Name 6",
                          {
                            template: "status",
                            payload: { status: "Due", icon: 'warning', color: 'warning' },
                          },
                          "18 Dec 2020 2:38 a.m.",
                          {
                            template: "actions",
                            payload: { id: "grandchild-4-name-6" },
                          },
                        ],
                      },
                    ],
                  },
                },
              },
            ],
          },
        },
      },
    ],
  },
},
methods: {
  printTable() {
    this.$refs.dataTableComplex.print('Data table - Complex')
  }
}
<!-- Template -->
<template>
  <div class="-text--truncate">
    <a
      :id="`ticket-popover-button-${id}`"
      href="#"
      :data-target="`#ticket-popover-${id}`"
      position="top-start">
      {{id}}
    </a>
    <section
      class="chi-popover"
      :id="`ticket-popover-${id}`"
      aria-modal="true"
      role="dialog"
      aria-label="Popover title"
    >
      <header class="chi-popover__header">
        <h2 class="chi-popover__title">{{ id }}</h2>
      </header>
      <div class="chi-popover__content">
        <p class="chi-popover__text">Content for {{ id }}</p>
      </div>
    </section>
  </div>
</template>

<!-- Mounted -->
mounted() {
  const buttonOpenOnHover = document.getElementById(`ticket-popover-button-${this.$props.id}`);
  const popover = chi.popover(buttonOpenOnHover);
  let hoverAnimationTimeout: number;

  if (buttonOpenOnHover) {
    buttonOpenOnHover.addEventListener('mouseenter', function() {
      hoverAnimationTimeout = setTimeout(() => {
        popover.show();
      }, 300);
    });

    buttonOpenOnHover.addEventListener('mouseleave', function() {
      if (hoverAnimationTimeout) {
        clearTimeout(hoverAnimationTimeout);
      }
      popover.hide();
    });
  }
}
beforeDestroy() {
  this.popover.dispose();
}
<!-- Template -->
<template>
  <div class="chi-dropdown">
    <button ref="dropdownTrigger" class="chi-button -icon -flat" aria-label="More options">
      <div class="chi-button__content">
        <i class="chi-icon icon-more-vert" aria-hidden="true"></i>
      </div>
    </button>
    <div class="chi-dropdown__menu">
      <a class="chi-dropdown__menu-item" href="#">
        <span><i class="chi-icon icon-edit -sm -icon--primary" /></span>
        <span>Edit</span>
      </a>
      <a class="chi-dropdown__menu-item" href="#">
        <span><i class="chi-icon icon-delete -sm -icon--primary" /></span>
        <span>Delete</span>
      </a>
    </div>
  </div>
</template>

<!-- mounted -->
mounted() {
  this.dropdown = chi.dropdown(this.$refs.dropdownTrigger);
}
beforeDestroy() {
  this.dropdown.dispose();
}

Base

Title
Use portal config to achieve portal styling
<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>

<!-- Config and Data -->
data: {
  config: {
    columnResize: true,
    style: {
      portal: true,
      noBorder: false,
      bordered: false,
      hover: false,
      size: 'md',
      striped: true,
    },
    pagination: {
      activePage: 1,
      compact: true,
      firstLast: true,
      pageJumper: false,
    },
    resultsPerPage: 3,
  },
  table: {
    head: {
      name: { label: 'Name', key: true, bold: true },
      id: { label: 'ID', key: true },
      lastLogin: { label: 'Last Login' },
    },
    body: [
      {
        id: 'name-1',
        data: [
          'Name 1',
          'name-1',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-2',
        data: [
          'Name 2',
          'name-2',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-3',
        data: [
          'Name 3',
          'name-3',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
      {
        id: 'name-4',
        data: [
          'Name 4',
          'name-4',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-5',
        data: [
          'Name 5',
          'name-5',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-6',
        data: [
          'Name 6',
          'name-6',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
    ]
  }
}
<div class="chi-card -portal -bg--white -bg-md--grey-15">
  <div class="chi-card__header -sm">
    <div class="chi-card__title">Title</div>
  </div>
  <div class="chi-card__content -p--0">
    <div class="chi-data-table -portal -compact">
      <div class="chi-data-table__head">
        <div class="chi-data-table__row">
          <div class="chi-data-table__cell">
            <div>Name</div>
          </div>
          <div class="chi-data-table__cell">
            <div>ID</div>
          </div>
          <div class="chi-data-table__cell">
            <div>Last Login</div>
          </div>
        </div>
      </div>
      <div class="chi-data-table__body">
        <div class="chi-data-table__row -md">
          <div class="chi-data-table__cell -key -bold">
            <div>Name 1</div>
          </div>
          <div class="chi-data-table__cell -key">
            <div>name-1</div>
          </div>
          <div class="chi-data-table__cell">
            <div>18 Dec 2020 3:26 p.m.</div>
          </div>
        </div>
        <div class="chi-data-table__row -striped -md">
          <div class="chi-data-table__cell -key -bold">
            <div>Name 2</div>
          </div>
          <div class="chi-data-table__cell -key">
            <div>name-2</div>
          </div>
          <div class="chi-data-table__cell">
            <div>18 Dec 2020 2:38 a.m.</div>
          </div>
        </div>
        <div class="chi-data-table__row -md">
          <div class="chi-data-table__cell -key -bold">
            <div>Name 3</div>
          </div>
          <div class="chi-data-table__cell -key">
            <div>name-3</div>
          </div>
          <div class="chi-data-table__cell">
            <div>5 Nov 2020 10:15 a.m.</div>
          </div>
        </div>
      </div>
      <div class="chi-data-table__footer">
        <nav class="chi-pagination -compact" role="navigation" aria-label="Pagination">
          <div class="chi-pagination__content">
            <div class="chi-pagination__start">
              <div class="chi-pagination__results">
                <span class="chi-pagination__label">240 Results</span>
              </div>
            </div>
            <div class="chi-pagination__center">
              <div class="chi-pagination__button-group chi-button-group">
                <button class="chi-button -icon -flat -primary -xs" aria-label="First page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-page-first" aria-hidden="true"></i>
                  </div>
                </button>
                <button class="chi-button -icon -flat -primary -xs" aria-label="Previous page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
                  </div>
                </button>
              </div>
              <div class="chi-pagination__label">
                <strong>2</strong>
                <span>of</span>
                <strong>3</strong>
              </div>
              <div class="chi-pagination__button-group chi-button-group">
                <button class="chi-button -icon -flat -primary -xs" aria-label="Next page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
                  </div>
                </button>
                <button class="chi-button -icon -flat -primary -xs" aria-label="Last page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-page-last" aria-hidden="true"></i>
                  </div>
                </button>
              </div>
            </div>
            <div class="chi-pagination__end"></div>
          </div>
        </nav>
      </div>
    </div>
  </div>
</div>

Second line wrapping

Title
Use cellWrap config to achieve the two line wrapping
<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>

<!-- Config and Data -->
data: {
  config: {
    columnResize: true,
    style: {
      portal: true,
      noBorder: false,
      bordered: false,
      hover: false,
      size: 'md',
      striped: true,
    },
    pagination: {
      activePage: 1,
      compact: true,
      firstLast: true,
      pageJumper: false,
    },
    resultsPerPage: 3,
    cellWrap: true,
  },
  table: {
    head: {
      name: { label: 'Name', key: true, bold: true },
      id: { label: 'ID', key: true },
      lastLogin: { label: 'Last Login' },
    },
    body: [
      {
        id: 'name-1',
        data: [
          'This is a long content with a second line wrapping without tooltip: Cell wrapped on two lines',
          'name-1',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-2',
        data: [
          'This is a long content with a second line wrapping with tooltip: This is a long content for the tooltip in the wrapped cell',
          'name-2',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-3',
        data: [
          'Name 3',
          'name-3',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
      {
        id: 'name-4',
        data: [
          'Name 4',
          'name-4',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-5',
        data: [
          'Name 5',
          'name-5',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-6',
        data: [
          'Name 6',
          'name-6',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
    ]
  }
}
<div class="chi-card -portal -bg--white -bg-md--grey-15">
  <div class="chi-card__header -sm">
    <div class="chi-card__title">Title</div>
  </div>
  <div class="chi-card__content -p--0">
    <div class="chi-data-table -portal -compact">
      <div class="chi-data-table__head">
        <div class="chi-data-table__row">
          <div class="chi-data-table__cell">
            <div>Name</div>
          </div>
          <div class="chi-data-table__cell">
            <div>ID</div>
          </div>
          <div class="chi-data-table__cell">
            <div>Last Login</div>
          </div>
        </div>
      </div>
      <div class="chi-data-table__body">
        <div class="chi-data-table__row -md">
          <div class="chi-data-table__cell -key -bold">
            <div class="-cell-wrap">This is a long content with a second line wrapping without tooltip: Cell wrapped on two lines</div>
          </div>
          <div class="chi-data-table__cell -key">
            <div class="-cell-wrap">name-1</div>
          </div>
          <div class="chi-data-table__cell">
            <div class="-cell-wrap">18 Dec 2020 3:26 p.m.</div>
          </div>
        </div>
        <div class="chi-data-table__row -striped -md">
          <div class="chi-data-table__cell -key -bold">
            <div class="-cell-wrap">This is a long content with a second line wrapping with tooltip: This is a long content for the tooltip in the wrapped cell</div>
          </div>
          <div class="chi-data-table__cell -key">
            <div class="-cell-wrap">name-2</div>
          </div>
          <div class="chi-data-table__cell">
            <div class="-cell-wrap">18 Dec 2020 2:38 a.m.</div>
          </div>
        </div>
        <div class="chi-data-table__row -md">
          <div class="chi-data-table__cell -key -bold">
            <div class="-cell-wrap">Name 3</div>
          </div>
          <div class="chi-data-table__cell -key">
            <div class="-cell-wrap">name-3</div>
          </div>
          <div class="chi-data-table__cell">
            <div class="-cell-wrap">5 Nov 2020 10:15 a.m.</div>
          </div>
        </div>
      </div>
      <div class="chi-data-table__footer">
        <nav class="chi-pagination -compact" role="navigation" aria-label="Pagination">
          <div class="chi-pagination__content">
            <div class="chi-pagination__start">
              <div class="chi-pagination__results">
                <span class="chi-pagination__label">240 Results</span>
              </div>
            </div>
            <div class="chi-pagination__center">
              <div class="chi-pagination__button-group chi-button-group">
                <button class="chi-button -icon -flat -primary -xs" aria-label="First page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-page-first" aria-hidden="true"></i>
                  </div>
                </button>
                <button class="chi-button -icon -flat -primary -xs" aria-label="Previous page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
                  </div>
                </button>
              </div>
              <div class="chi-pagination__label">
                <strong>2</strong>
                <span>of</span>
                <strong>3</strong>
              </div>
              <div class="chi-pagination__button-group chi-button-group">
                <button class="chi-button -icon -flat -primary -xs" aria-label="Next page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
                  </div>
                </button>
                <button class="chi-button -icon -flat -primary -xs" aria-label="Last page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-page-last" aria-hidden="true"></i>
                  </div>
                </button>
              </div>
            </div>
            <div class="chi-pagination__end"></div>
          </div>
        </nav>
      </div>
    </div>
  </div>

Empty

No Results

Title
Use noResultsMessage config to customize the no results data message
<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>

<!-- Config and Data -->
data: {
  config: {
    columnResize: true,
    noResultsMessage: 'No matching results',
    style: {
      portal: true,
      noBorder: false,
      bordered: false,
      hover: false,
      size: 'md',
      striped: true,
    },
    pagination: {
      activePage: 1,
      compact: false,
      firstLast: false,
      pageJumper: true,
    },
    resultsPerPage: 3,
  },
  table: {
    head: {
      name: { label: 'Name' },
      id: { label: 'ID' },
      lastLogin: { label: 'Last Login' },
    },
    body: [],
  }
}
<div class="chi-card -portal -bg--white -bg-md--grey-15">
  <div class="chi-card__header -sm">
    <div class="chi-card__title">Title</div>
  </div>
  <div class="chi-card__content -p--0">
    <div class="chi-data-table -portal -compact">
      <div class="chi-data-table__head">
        <div class="chi-data-table__row">
          <div class="chi-data-table__cell">
            <div>Name</div>
          </div>
          <div class="chi-data-table__cell">
            <div>ID</div>
          </div>
          <div class="chi-data-table__cell">
            <div>Last Login</div>
          </div>
        </div>
      </div>
      <div class="chi-data-table__body">
        <div class="chi-data-table__row-empty">
          <div>No matching results</div>
        </div>
      </div>
    </div>
  </div>
</div>

No Filters

Title
Use noFiltersMessage config to customize the no filters data message
<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>

<!-- Config and Data -->
data: {
  config: {
    columnResize: true,
    noFiltersMessage: 'Search for or select at least one filter to get results',
    style: {
      portal: true,
      noBorder: false,
      bordered: false,
      hover: false,
      size: 'md',
      striped: true,
    },
    pagination: {
      activePage: 1,
      compact: false,
      firstLast: false,
      pageJumper: true,
    },
    resultsPerPage: 3,
  },
  table: {
    head: {
      name: { label: 'Name' },
      id: { label: 'ID' },
      lastLogin: { label: 'Last Login' },
    },
    body: [],
  }
}
<div class="chi-card -portal -bg--white -bg-md--grey-15">
  <div class="chi-card__header -sm">
    <div class="chi-card__title">Title</div>
  </div>
  <div class="chi-card__content -p--0">
    <div class="chi-data-table -portal -compact">
      <div class="chi-data-table__head">
        <div class="chi-data-table__row">
          <div class="chi-data-table__cell">
            <div>Name</div>
          </div>
          <div class="chi-data-table__cell">
            <div>ID</div>
          </div>
          <div class="chi-data-table__cell">
            <div>Last Login</div>
          </div>
        </div>
      </div>
      <div class="chi-data-table__body">
        <div class="chi-data-table__row-empty">
          <div>Search for or select at least one filter to get results</div>
        </div>
      </div>
    </div>
  </div>
</div>

Radio selection

Title
Use selectable config to render rows with radio buttons
<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>

<!-- Config and Data -->
data: {
  config: {
    columnResize: true,
    style: {
      portal: true,
      noBorder: false,
      bordered: false,
      hover: false,
      size: 'md',
      striped: true,
    },
    pagination: {
      activePage: 1,
      compact: true,
      firstLast: true,
      pageJumper: false,
    },
    selectable: 'radio',
    resultsPerPage: 3,
  },
  table: {
    head: {
      name: { label: 'Name' },
      id: { label: 'ID' },
      lastLogin: { label: 'Last Login' },
    },
    body: [
      {
        id: 'name-1',
        data: [
          'Name 1',
          'name-1',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-2',
        data: [
          'Name 2',
          'name-2',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-3',
        data: [
          'Name 3',
          'name-3',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
      {
        id: 'name-4',
        data: [
          'Name 4',
          'name-4',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-5',
        data: [
          'Name 5',
          'name-5',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-6',
        data: [
          'Name 6',
          'name-6',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
    ]
  }
}
<div class="chi-card -portal -bg--white -bg-md--grey-15">
  <div class="chi-card__header -sm">
    <div class="chi-card__title">Title</div>
  </div>
  <div class="chi-card__content -p--0">
    <div class="chi-data-table -portal -compact">
      <div class="chi-data-table__head">
        <div class="chi-data-table__row">
          <div class="chi-data-table__cell -selectable"></div>
          <div class="chi-data-table__cell">
            <div>Name</div>
          </div>
          <div class="chi-data-table__cell">
            <div>ID</div>
          </div>
          <div class="chi-data-table__cell">
            <div>Last Login</div>
          </div>
        </div>
      </div>
      <div class="chi-data-table__body">
        <fieldset>
          <legend class="--sr-only">Select a Row</legend>
          <div class="chi-data-table__row -md">
            <div class="chi-data-table__cell -selectable">
              <div class="chi-radio">
                <input type="radio" class="chi-radio__input" id="radio-ba2" name="radios">
                <label class="chi-radio__label" for="radio-ba2"></label>
              </div>
            </div>
            <div class=" chi-data-table__cell" data-label="Name">
              <div>Name 1</div>
            </div>
            <div class="chi-data-table__cell" data-label="ID">
              <div>name-1</div>
            </div>
            <div class="chi-data-table__cell" data-label="Last Login">
              <div>18 Dec 2020 3:26 p.m.</div>
            </div>
          </div>
          <div class="chi-data-table__row -md">
            <div class="chi-data-table__cell -lh--1 -selectable">
              <div class="chi-radio">
                <input type="radio" class="chi-radio__input" id="radio-ba3" name="radios">
                <label class="chi-radio__label" for="radio-ba3"></label>
              </div>
            </div>
            <div class=" chi-data-table__cell" data-label="Name">
              <div>Name 2</div>
            </div>
            <div class="chi-data-table__cell" data-label="ID">
              <div>name-2</div>
            </div>
            <div class="chi-data-table__cell" data-label="Last Login">
              <div>18 Dec 2020 2:38 a.m.</div>
            </div>
          </div>
          <div class="chi-data-table__row -md">
            <div class="chi-data-table__cell -lh--1 -selectable">
              <div class="chi-radio">
                <input type="radio" class="chi-radio__input" id="radio-ba4" name="radios">
                <label class="chi-radio__label" for="radio-ba4"></label>
              </div>
            </div>
            <div class=" chi-data-table__cell" data-label="Name">
              <div>Name 3</div>
            </div>
            <div class="chi-data-table__cell" data-label="ID">
              <div>name-3</div>
            </div>
            <div class="chi-data-table__cell" data-label="Last Login">
              <div>5 Nov 2020 10:15 a.m.</div>
            </div>
          </div>
        </fieldset>
      </div>
      <div class="chi-data-table__footer">
        <nav class="chi-pagination -compact" role="navigation" aria-label="Pagination">
          <div class="chi-pagination__content">
            <div class="chi-pagination__start">
              <div class="chi-pagination__results">
                <span class="chi-pagination__label">240 Results</span>
              </div>
            </div>
            <div class="chi-pagination__center">
              <div class="chi-pagination__button-group chi-button-group">
                <button class="chi-button -icon -flat -primary -xs" aria-label="First page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-page-first" aria-hidden="true"></i>
                  </div>
                </button>
                <button class="chi-button -icon -flat -primary -xs" aria-label="Previous page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
                  </div>
                </button>
              </div>
              <div class="chi-pagination__label">
                <strong>2</strong>
                <span>of</span>
                <strong>3</strong>
              </div>
              <div class="chi-pagination__button-group chi-button-group">
                <button class="chi-button -icon -flat -primary -xs" aria-label="Next page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
                  </div>
                </button>
                <button class="chi-button -icon -flat -primary -xs" aria-label="Last page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-page-last" aria-hidden="true"></i>
                  </div>
                </button>
              </div>
            </div>
            <div class="chi-pagination__end"></div>
          </div>
        </nav>
      </div>
    </div>
  </div>
</div>

Accordion

Title
Use nestedContent property to provide data of row accordion content
<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>

<!-- Config and Data -->
data: {
  config: {
    columnResize: true,
    style: {
      portal: true,
      noBorder: false,
      bordered: false,
      hover: false,
      size: 'md',
      striped: true,
    },
    pagination: {
      activePage: 1,
      compact: true,
      firstLast: true,
      pageJumper: false,
    },
    showExpandAll: true,
    resultsPerPage: 3,
  },
  table: {
    head: {
      name: { label: 'Name' },
      id: { label: 'ID' },
      lastLogin: { label: 'Last Login' },
    },
    body: [
      {
        expanded: true,
        id: 'name-1',
        nestedContent: {
            value: "Accordion content",
        },
        data: [
          'Name 1',
          'name-1',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-2',
        nestedContent: {
            value: "Accordion content",
        },
        data: [
          'Name 2',
          'name-2',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-3',
        nestedContent: {
            value: "Accordion content",
        },
        data: [
          'Name 3',
          'name-3',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
      {
        id: 'name-4',
        nestedContent: {
            value: "Accordion content",
        },
        data: [
          'Name 4',
          'name-4',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-5',
        nestedContent: {
            value: "Accordion content",
        },
        data: [
          'Name 5',
          'name-5',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-6',
        nestedContent: {
            value: "Accordion content",
        },
        data: [
          'Name 6',
          'name-6',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
    ]
  }
}
<div class="chi-card -portal -bg--white -bg-md--grey-15">
  <div class="chi-card__header -sm">
    <div class="chi-card__title">Title</div>
  </div>
  <div class="chi-card__content -p--0">
    <div class="chi-data-table -portal -compact">
      <div role="row" class="chi-data-table__head">
        <div class="chi-data-table__row">
          <div class="chi-data-table__cell -expandable -position--relative">
            <div>
              <button aria-label="Expand All Rows" class="chi-button -icon -flat -expand -sm">
                <div class="chi-button__content">
                  <i class="chi-icon icon-squares-minus-outline"></i>
                </div>
                <span class="-sr--only">Expand All Rows</span>
              </button>
              <div class="chi-tooltip " data-popper-placement="top">
                <span>Collapse All</span>
              </div>
            </div>
            <div class="-position--absolute resize-handle">&nbsp;</div>
          </div>
          <div data-label="Name" class="chi-data-table__cell -justify-content-md--start -position--relative">
              Name <div class="-position--absolute resize-handle">&nbsp;</div>
          </div>
          <div data-label="ID" class="chi-data-table__cell -justify-content-md--start -position--relative">
              ID <div class="-position--absolute resize-handle">&nbsp;</div>
          </div>
          <div data-label="Last Login" class="chi-data-table__cell -justify-content-md--start -position--relative">
              Last Login <div class="-position--absolute resize-handle">&nbsp;</div>
          </div>
        </div>
      </div>
      <div class="chi-data-table__body">
        <div id="row-dt-1-name-1" data-rownumber="0" data-rowlevel="0" role="row" class="chi-data-table__row -md -expanded">
          <div role="cell" class="chi-data-table__cell -expandable">
            <button aria-label="Expand row" data-target="#row-dt-1-name-1-content" class="chi-button -icon -flat -expand -xs">
              <div class="chi-button__content">
                <i class="chi-icon icon-minus"></i>
              </div>
              <span class="-sr--only">Expand Row</span>
            </button>
          </div>
          <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
            <div class="-w--100">
              <div class="-text--truncate">Name 1</div>
            </div>
          </div>
          <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
            <div class="-w--100">
              <div class="-text--truncate">name-1</div>
            </div>
          </div>
          <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
            <div class="-w--100">
              <div class="-text--truncate">18 Dec 2020 3:26 p.m.</div>
            </div>
          </div>
        </div>
        <div id="row-dt-1-name-1-content">
          <div role="row" class="chi-data-table__row-child -p--2">Accordion content</div>
        </div>
        <div id="row-dt-1-name-2" data-rownumber="1" data-rowlevel="0" role="row" class="chi-data-table__row -striped -md -collapsed">
          <div role="cell" class="chi-data-table__cell -expandable">
            <button aria-label="Expand row" data-target="#row-dt-1-name-2-content" class="chi-button -icon -flat -expand -xs">
              <div class="chi-button__content">
                <i class="chi-icon icon-plus"></i>
              </div>
              <span class="-sr--only">Expand Row</span>
            </button>
          </div>
          <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
            <div class="-w--100">
              <div class="-text--truncate">Name 2</div>
            </div>
          </div>
          <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
            <div class="-w--100">
              <div class="-text--truncate">name-2</div>
            </div>
          </div>
          <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
            <div class="-w--100">
              <div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
            </div>
          </div>
        </div>
        <div id="row-dt-1-name-2-content" style="display: none;">
          <div role="row" class="chi-data-table__row-child -p--2">Accordion content</div>
        </div>
        <div id="row-dt-1-name-3" data-rownumber="2" data-rowlevel="0" role="row" class="chi-data-table__row -md -collapsed">
          <div role="cell" class="chi-data-table__cell -expandable">
            <button aria-label="Expand row" data-target="#row-dt-1-name-3-content" class="chi-button -icon -flat -expand -xs">
              <div class="chi-button__content">
                <i class="chi-icon icon-plus"></i>
              </div>
              <span class="-sr--only">Expand Row</span>
            </button>
          </div>
          <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
            <div class="-w--100">
              <div class="-text--truncate">Name 3</div>
            </div>
          </div>
          <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
            <div class="-w--100">
              <div class="-text--truncate">name-3</div>
            </div>
          </div>
          <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
            <div class="-w--100">
              <div class="-text--truncate">5 Nov 2020 10:15 a.m.</div>
            </div>
          </div>
        </div>
        <div id="row-dt-1-name-3-content" style="display: none;">
          <div role="row" class="chi-data-table__row-child -p--2">Accordion content</div>
        </div>
      </div>
      <div class="chi-data-table__footer">
        <nav class="chi-pagination -compact" role="navigation" aria-label="Pagination">
          <div class="chi-pagination__content">
            <div class="chi-pagination__start">
              <div class="chi-pagination__results">
                <span class="chi-pagination__label">240 Results</span>
              </div>
            </div>
            <div class="chi-pagination__center">
              <div class="chi-pagination__button-group chi-button-group">
                <button class="chi-button -icon -flat -primary -xs" aria-label="First page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-page-first" aria-hidden="true"></i>
                  </div>
                </button>
                <button class="chi-button -icon -flat -primary -xs" aria-label="Previous page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
                  </div>
                </button>
              </div>
              <div class="chi-pagination__label">
                <strong>2</strong>
                <span>of</span>
                <strong>3</strong>
              </div>
              <div class="chi-pagination__button-group chi-button-group">
                <button class="chi-button -icon -flat -primary -xs" aria-label="Next page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
                  </div>
                </button>
                <button class="chi-button -icon -flat -primary -xs" aria-label="Last page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-page-last" aria-hidden="true"></i>
                  </div>
                </button>
              </div>
            </div>
            <div class="chi-pagination__end"></div>
          </div>
        </nav>
      </div>
    </div>
  </div>

Accordion Child

Title
Use nestedContent property to provide data of row accordion content
<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>

<!-- Config and Data -->
data: {
  config: {
    columnResize: true,
    style: {
      portal: true,
      noBorder: false,
      bordered: false,
      hover: false,
      size: 'md',
      striped: true,
    },
    pagination: {
      activePage: 1,
      compact: true,
      firstLast: true,
      pageJumper: false,
    },
    showExpandAll: true,
    resultsPerPage: 3,
  },
  table: {
    head: {
      name: { label: 'Name', key: true, bold: true },
      id: { label: 'ID', key: true },
      lastLogin: { label: 'Last Login' },
    },
    body: [
      {
        expanded: true,
        id: 'name-1',
        nestedContent: {
          table: {
            data: [
              {
                id: 'name-1-0',
                data: [
                  'Child Name 1',
                  'child-name-1',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
              {
                id: 'name-1-1',
                data: [
                  'Child Name 2',
                  'child-name-2',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
            ],
          },
        },
        data: [
          'Name 1',
          'name-1',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-2',
        nestedContent: {
          table: {
            data: [
              {
                id: 'name-2-0',
                data: [
                  'Child Name 1',
                  'child-name-1',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
              {
                id: 'name-2-1',
                data: [
                  'Child Name 2',
                  'child-name-2',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
            ],
          },
        },
        data: [
          'Name 2',
          'name-2',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-3',
        nestedContent: {
          table: {
            data: [
              {
                id: 'name-3-0',
                data: [
                  'Child Name 1',
                  'child-name-1',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
              {
                id: 'name-3-1',
                data: [
                  'Child Name 2',
                  'child-name-2',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
            ],
          },
        },
        data: [
          'Name 3',
          'name-3',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
      {
        id: 'name-4',
        nestedContent: {
          table: {
            data: [
              {
                id: 'name-4-0',
                data: [
                  'Child Name 1',
                  'child-name-1',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
              {
                id: 'name-4-1',
                data: [
                  'Child Name 2',
                  'child-name-2',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
            ],
          },
        },
        data: [
          'Name 4',
          'name-4',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-5',
        nestedContent: {
          table: {
            data: [
              {
                id: 'name-5-0',
                data: [
                  'Child Name 1',
                  'child-name-1',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
              {
                id: 'name-5-1',
                data: [
                  'Child Name 2',
                  'child-name-2',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
            ],
          },
        },
        data: [
          'Name 5',
          'name-5',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-6',
        nestedContent: {
          table: {
            data: [
              {
                id: 'name-6-0',
                data: [
                  'Child Name 1',
                  'child-name-1',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
              {
                id: 'name-6-1',
                data: [
                  'Child Name 2',
                  'child-name-2',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
            ],
          },
        },
        data: [
          'Name 6',
          'name-6',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
    ]
  }
}
<div class="chi-card -portal -bg--white -bg-md--grey-15">
  <div class="chi-card__header -sm">
    <div class="chi-card__title">Title</div>
  </div>
  <div class="chi-card__content -p--0">
    <div class="chi-data-table -portal -compact">
      <div class="chi-data-table__head">
        <div class="chi-data-table__row">
          <div class="chi-data-table__cell -expandable -position--relative">
            <button class="chi-button -icon -flat -expand -sm">
              <div class="chi-button__content">
                <i class="chi-icon icon-squares-minus-outline"></i>
              </div>
            </button>
          </div>
          <div class="chi-data-table__cell">
            <div>Name</div>
          </div>
          <div class="chi-data-table__cell">
            <div>ID</div>
          </div>
          <div class="chi-data-table__cell">
            <div>Last Login</div>
          </div>
        </div>
      </div>
      <div class="chi-data-table__body">
        <div id="row-dt-1-name-1" data-rownumber="0" data-rowlevel="0" role="row" class="chi-data-table__row -md -expanded">
          <div role="cell" class="chi-data-table__cell -expandable">
            <button aria-label="Expand row" data-target="#row-dt-1-name-1-content" class="chi-button -icon -flat -expand -xs">
              <div class="chi-button__content">
                <i class="chi-icon icon-minus"></i>
              </div>
              <span class="-sr--only">Expand Row</span>
            </button>
          </div>
          <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
            <div class="-w--100">
              <div class="-text--truncate">Name 1</div>
            </div>
          </div>
          <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
            <div class="-w--100">
              <div class="-text--truncate">name-1</div>
            </div>
          </div>
          <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
            <div class="-w--100">
              <div class="-text--truncate">18 Dec 2020 3:26 p.m.</div>
            </div>
          </div>
        </div>
        <div id="row-dt-1-name-1-content">
          <div id="row-dt-1-name-1-0" data-rownumber="2-1" data-rowlevel="1" role="row" class="chi-data-table__row-child -md -collapsed">
            <div class="chi-data-table__cell -expandable"></div>
            <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
              <button aria-label="Expand row" data-target="#row-dt-1-name-1-0-content" class="chi-button -icon -flat -expand -xs">
                <div class="chi-button__content">
                  <i class="chi-icon icon-plus"></i>
                </div>
                <span class="-sr--only">Expand Row</span>
              </button>
              <div class="-w--100">
                <div class="-text--truncate">Child Name 1</div>
              </div>
            </div>
            <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
              <div class="-w--100">
                <div class="-text--truncate">child-name-1</div>
              </div>
            </div>
            <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
              <div class="-w--100">
                <div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
              </div>
            </div>
          </div>
          <div id="row-dt-1-name-1-1" data-rownumber="2-0-1" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
            <div role="cell" class="chi-data-table__cell -expandable"></div>
            <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
              <div class="-w--100">
                <div class="-text--truncate">Child Name 2</div>
              </div>
            </div>
            <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
              <div class="-w--100">
                <div class="-text--truncate">child-name-2</div>
              </div>
            </div>
            <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
              <div class="-w--100">
                <div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
              </div>
            </div>
          </div>
        </div>

        <div id="row-dt-1-name-2" data-rownumber="1" data-rowlevel="0" role="row" class="chi-data-table__row -striped -md -collapsed">
          <div role="cell" class="chi-data-table__cell -expandable">
            <button aria-label="Expand row" data-target="#row-dt-1-name-2-content" class="chi-button -icon -flat -expand -xs">
              <div class="chi-button__content">
                <i class="chi-icon icon-plus"></i>
              </div>
              <span class="-sr--only">Expand Row</span>
            </button>
          </div>
          <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
            <div class="-w--100">
              <div class="-text--truncate">Name 2</div>
            </div>
          </div>
          <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
            <div class="-w--100">
              <div class="-text--truncate">name-2</div>
            </div>
          </div>
          <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
            <div class="-w--100">
              <div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
            </div>
          </div>
        </div>
        <div id="row-dt-1-name-2-content" style="display: none;">
          <div id="row-dt-1-name-2-0" data-rownumber="2-1" data-rowlevel="1" role="row" class="chi-data-table__row-child -md -collapsed">
            <div class="chi-data-table__cell -expandable"></div>
            <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
              <button aria-label="Expand row" data-target="#row-dt-1-name-2-0-content" class="chi-button -icon -flat -expand -xs">
                <div class="chi-button__content">
                  <i class="chi-icon icon-plus"></i>
                </div>
                <span class="-sr--only">Expand Row</span>
              </button>
              <div class="-w--100">
                <div class="-text--truncate">Child Name 1</div>
              </div>
            </div>
            <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
              <div class="-w--100">
                <div class="-text--truncate">child-name-1</div>
              </div>
            </div>
            <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
              <div class="-w--100">
                <div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
              </div>
            </div>
          </div>
          <div id="row-dt-1-name-2-1" data-rownumber="2-0-1" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
            <div role="cell" class="chi-data-table__cell -expandable"></div>
            <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
              <div class="-w--100">
                <div class="-text--truncate">Child Name 2</div>
              </div>
            </div>
            <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
              <div class="-w--100">
                <div class="-text--truncate">child-name-2</div>
              </div>
            </div>
            <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
              <div class="-w--100">
                <div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
              </div>
            </div>
          </div>
        </div>

        <div id="row-dt-1-name-3" data-rownumber="2-0" data-rowlevel="1" role="row" class="chi-data-table__row -md -collapsed">
          <div role="cell" class="chi-data-table__cell -expandable">
            <button aria-label="Expand row" data-target="#row-dt-1-name-3-content" class="chi-button -icon -flat -expand -xs">
              <div class="chi-button__content">
                <i class="chi-icon icon-plus"></i>
              </div>
              <span class="-sr--only">Expand Row</span>
            </button>
          </div>
          <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
            <div class="-w--100">
              <div class="-text--truncate">Name 3</div>
            </div>
          </div>
          <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
            <div class="-w--100">
              <div class="-text--truncate">name-3</div>
            </div>
          </div>
          <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
            <div class="-w--100">
              <div class="-text--truncate">5 Nov 2020 10:15 a.m.</div>
            </div>
          </div>
        </div>
        <div id="row-dt-1-name-3-content" style="display: none;">
          <div id="row-dt-1-name-3-0" data-rownumber="2-1" data-rowlevel="1" role="row" class="chi-data-table__row-child -md -collapsed">
            <div class="chi-data-table__cell -expandable"></div>
            <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
              <button aria-label="Expand row" data-target="#row-dt-1-name-3-0-content" class="chi-button -icon -flat -expand -xs">
                <div class="chi-button__content">
                  <i class="chi-icon icon-plus"></i>
                </div>
                <span class="-sr--only">Expand Row</span>
              </button>
              <div class="-w--100">
                <div class="-text--truncate">Child Name 1</div>
              </div>
            </div>
            <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
              <div class="-w--100">
                <div class="-text--truncate">child-name-1</div>
              </div>
            </div>
            <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
              <div class="-w--100">
                <div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
              </div>
            </div>
          </div>
          <div id="row-dt-1-name-3-1" data-rownumber="2-0-1" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
            <div role="cell" class="chi-data-table__cell -expandable"></div>
            <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
              <div class="-w--100">
                <div class="-text--truncate">Child Name 2</div>
              </div>
            </div>
            <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
              <div class="-w--100">
                <div class="-text--truncate">child-name-2</div>
              </div>
            </div>
            <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
              <div class="-w--100">
                <div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="chi-data-table__footer">
        <nav class="chi-pagination -compact" role="navigation" aria-label="Pagination">
          <div class="chi-pagination__content">
            <div class="chi-pagination__start">
              <div class="chi-pagination__results">
                <span class="chi-pagination__label">240 Results</span>
              </div>
            </div>
            <div class="chi-pagination__center">
              <div class="chi-pagination__button-group chi-button-group">
                <button class="chi-button -icon -flat -primary -xs" aria-label="First page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-page-first" aria-hidden="true"></i>
                  </div>
                </button>
                <button class="chi-button -icon -flat -primary -xs" aria-label="Previous page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
                  </div>
                </button>
              </div>
              <div class="chi-pagination__label">
                <strong>2</strong>
                <span>of</span>
                <strong>3</strong>
              </div>
              <div class="chi-pagination__button-group chi-button-group">
                <button class="chi-button -icon -flat -primary -xs" aria-label="Next page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
                  </div>
                </button>
                <button class="chi-button -icon -flat -primary -xs" aria-label="Last page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-page-last" aria-hidden="true"></i>
                  </div>
                </button>
              </div>
            </div>
            <div class="chi-pagination__end"></div>
          </div>
        </nav>
      </div>
    </div>
  </div>

Accordion Grand Child

Title
Use nestedContent property to provide data of row accordion content
<!-- Vue component -->
<ChiDataTable :config="config" :data="table"></ChiDataTable>

<!-- Config and Data -->
data: {
  config: {
    columnResize: true,
    style: {
      portal: true,
      noBorder: false,
      bordered: false,
      hover: false,
      size: "md",
      striped: true,
    },
    pagination: {
      activePage: 1,
      compact: true,
      firstLast: true,
      pageJumper: false,
    },
    showExpandAll: true,
    resultsPerPage: 3,
  },
  table: {
    head: {
      name: { label: 'Name', key: true, bold: true },
      id: { label: 'ID', key: true },
      lastLogin: { label: 'Last Login' },
    },
    body: [
      {
        expanded: true,
        id: 'name-1',
        nestedContent: {
          table: {
            data: [
              {
                expanded: true,
                id: 'name-1-0',
                data: [
                  'Child Name 1',
                  'child-name-1',
                  '18 Dec 2020 2:38 a.m.',
                ],
                nestedContent: {
                table: {
                  data: [
                  {
                    id: 'name-1-0',
                    data: [
                    'Child Name 1',
                    'child-name-1',
                    '18 Dec 2020 2:38 a.m.',
                    ],
                  },
                  {
                    id: 'name-1-1',
                    data: [
                    'Child Name 2',
                    'child-name-2',
                    '18 Dec 2020 2:38 a.m.',
                    ],
                  },
                  ],
                },
                },
              },
              {
                id: 'name-1-1',
                data: [
                  'Child Name 2',
                  'child-name-2',
                  '18 Dec 2020 2:38 a.m.',
                ],
                nestedContent: {
                table: {
                  data: [
                  {
                    id: 'name-1-0',
                    data: [
                    'Child Name 1',
                    'child-name-1',
                    '18 Dec 2020 2:38 a.m.',
                    ],
                  },
                  {
                    id: 'name-1-1',
                    data: [
                    'Child Name 2',
                    'child-name-2',
                    '18 Dec 2020 2:38 a.m.',
                    ],
                  },
                  ],
                },
                },
              },
            ],
          },
        },
        data: [
          'Name 1',
          'name-1',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-2',
        nestedContent: {
          table: {
            data: [
              {
                id: 'name-2-0',
                data: [
                  'Child Name 1',
                  'child-name-1',
                  '18 Dec 2020 2:38 a.m.',
                ],
        nestedContent: {
          table: {
            data: [
              {
                id: 'name-1-0',
                data: [
                  'Child Name 1',
                  'child-name-1',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
              {
                id: 'name-1-1',
                data: [
                  'Child Name 2',
                  'child-name-2',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
            ],
          },
        },
          },
          {
            id: 'name-2-1',
            data: [
              'Child Name 2',
              'child-name-2',
              '18 Dec 2020 2:38 a.m.',
            ],
        nestedContent: {
          table: {
            data: [
              {
                id: 'name-1-0',
                data: [
                  'Child Name 1',
                  'child-name-1',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
              {
                id: 'name-1-1',
                data: [
                  'Child Name 2',
                  'child-name-2',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
            ],
          },
        },
          },
            ],
          },
        },
        data: [
          'Name 2',
          'name-2',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-3',
        nestedContent: {
          table: {
            data: [
              {
                id: 'name-3-0',
                data: [
                  'Child Name 1',
                  'child-name-1',
                  '18 Dec 2020 2:38 a.m.',
                ],
        nestedContent: {
          table: {
            data: [
              {
                id: 'name-1-0',
                data: [
                  'Child Name 1',
                  'child-name-1',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
              {
                id: 'name-1-1',
                data: [
                  'Child Name 2',
                  'child-name-2',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
            ],
          },
        },
          },
          {
            id: 'name-3-1',
            data: [
              'Child Name 2',
              'child-name-2',
              '18 Dec 2020 2:38 a.m.',
            ],
        nestedContent: {
          table: {
            data: [
              {
                id: 'name-1-0',
                data: [
                  'Child Name 1',
                  'child-name-1',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
              {
                id: 'name-1-1',
                data: [
                  'Child Name 2',
                  'child-name-2',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
            ],
          },
        },
          },
            ],
          },
        },
        data: [
          'Name 3',
          'name-3',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
      {
        id: 'name-4',
        nestedContent: {
          table: {
            data: [
              {
                id: 'name-4-0',
                data: [
                  'Child Name 1',
                  'child-name-1',
                  '18 Dec 2020 2:38 a.m.',
                ],
        nestedContent: {
          table: {
            data: [
              {
                id: 'name-1-0',
                data: [
                  'Child Name 1',
                  'child-name-1',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
              {
                id: 'name-1-1',
                data: [
                  'Child Name 2',
                  'child-name-2',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
            ],
          },
        },
          },
          {
            id: 'name-4-1',
            data: [
              'Child Name 2',
              'child-name-2',
              '18 Dec 2020 2:38 a.m.',
            ],
        nestedContent: {
          table: {
            data: [
              {
                id: 'name-1-0',
                data: [
                  'Child Name 1',
                  'child-name-1',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
              {
                id: 'name-1-1',
                data: [
                  'Child Name 2',
                  'child-name-2',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
            ],
          },
        },
          },
            ],
          },
        },
        data: [
          'Name 4',
          'name-4',
          '18 Dec 2020 3:26 p.m.',
        ],
      },
      {
        id: 'name-5',
        nestedContent: {
          table: {
            data: [
              {
                id: 'name-5-0',
                data: [
                  'Child Name 1',
                  'child-name-1',
                  '18 Dec 2020 2:38 a.m.',
                ],
        nestedContent: {
          table: {
            data: [
              {
                id: 'name-1-0',
                data: [
                  'Child Name 1',
                  'child-name-1',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
              {
                id: 'name-1-1',
                data: [
                  'Child Name 2',
                  'child-name-2',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
            ],
          },
        },
          },
          {
            id: 'name-5-1',
            data: [
              'Child Name 2',
              'child-name-2',
              '18 Dec 2020 2:38 a.m.',
            ],
        nestedContent: {
          table: {
            data: [
              {
                id: 'name-1-0',
                data: [
                  'Child Name 1',
                  'child-name-1',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
              {
                id: 'name-1-1',
                data: [
                  'Child Name 2',
                  'child-name-2',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
            ],
          },
        },
          },
            ],
          },
        },
        data: [
          'Name 5',
          'name-5',
          '18 Dec 2020 2:38 a.m.',
        ],
      },
      {
        id: 'name-6',
        nestedContent: {
          table: {
            data: [
              {
                id: 'name-6-0',
                data: [
                  'Child Name 1',
                  'child-name-1',
                  '18 Dec 2020 2:38 a.m.',
                ],
        nestedContent: {
          table: {
            data: [
              {
                id: 'name-1-0',
                data: [
                  'Child Name 1',
                  'child-name-1',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
              {
                id: 'name-1-1',
                data: [
                  'Child Name 2',
                  'child-name-2',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
            ],
          },
        },
          },
          {
            id: 'name-6-1',
            data: [
              'Child Name 2',
              'child-name-2',
              '18 Dec 2020 2:38 a.m.',
            ],
        nestedContent: {
          table: {
            data: [
              {
                id: 'name-1-0',
                data: [
                  'Child Name 1',
                  'child-name-1',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
              {
                id: 'name-1-1',
                data: [
                  'Child Name 2',
                  'child-name-2',
                  '18 Dec 2020 2:38 a.m.',
                ],
              },
            ],
          },
        },
          },
            ],
          },
        },
        data: [
          'Name 6',
          'name-6',
          '5 Nov 2020 10:15 a.m.',
        ],
      },
    ]
  }
}
<div class="chi-card -portal -bg--white -bg-md--grey-15">
  <div class="chi-card__header -sm">
    <div class="chi-card__title">Title</div>
  </div>
  <div class="chi-card__content -p--0">
    <div class="chi-data-table -portal -compact">
      <div role="row" class="chi-data-table__head">
        <div class="chi-data-table__row">
          <div class="chi-data-table__cell -expandable -position--relative">
            <div>
              <button aria-label="Expand All Rows" class="chi-button -icon -flat -expand -sm">
                <div class="chi-button__content">
                  <i class="chi-icon icon-squares-minus-outline"></i>
                </div>
                <span class="-sr--only">Expand All Rows</span>
              </button>
              <div class="chi-tooltip " data-popper-placement="top">
                <span>Collapse All</span>
              </div>
            </div>
            <div class="-position--absolute resize-handle">&nbsp;</div>
          </div>
          <div data-label="Name" class="chi-data-table__cell -justify-content-md--start -position--relative">
            Name <div class="-position--absolute resize-handle">&nbsp;</div>
          </div>
          <div data-label="ID" class="chi-data-table__cell -justify-content-md--start -position--relative">
            ID <div class="-position--absolute resize-handle">&nbsp;</div>
          </div>
          <div data-label="Last Login" class="chi-data-table__cell -justify-content-md--start -position--relative">
            Last Login <div class="-position--absolute resize-handle">&nbsp;</div>
          </div>
        </div>
      </div>

      <div class="chi-data-table__body">
        <div id="row-dt-1-name-1" data-rownumber="0" data-rowlevel="0" role="row" class="chi-data-table__row -md -expanded">
          <div role="cell" class="chi-data-table__cell -expandable">
            <button aria-label="Expand row" data-target="#row-dt-1-name-1-content" class="chi-button -icon -flat -expand -xs">
              <div class="chi-button__content">
                <i class="chi-icon icon-minus"></i>
              </div>
              <span class="-sr--only">Expand Row</span>
            </button>
          </div>
          <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
            <div class="-w--100">
              <div class="-text--truncate">Name 1</div>
            </div>
          </div>
          <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
            <div class="-w--100">
              <div class="-text--truncate">name-1</div>
            </div>
          </div>
          <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
            <div class="-w--100">
              <div class="-text--truncate">18 Dec 2020 3:26 p.m.</div>
            </div>
          </div>
        </div>
        <div id="row-dt-1-name-1-content">
          <div id="row-dt-1-name-1-0" data-rownumber="0-0" data-rowlevel="1" role="row" class="chi-data-table__row-child -md -expanded">
            <div class="chi-data-table__cell -expandable"></div>
            <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
              <button aria-label="Expand row" data-target="#row-dt-1-name-1-0-content" class="chi-button -icon -flat -expand -xs">
                <div class="chi-button__content">
                  <i class="chi-icon icon-minus"></i>
                </div>
                <span class="-sr--only">Expand Row</span>
              </button>
              <div class="-w--100">
                <div class="-text--truncate">Child Name 1</div>
              </div>
            </div>
            <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
              <div class="-w--100">
                <div class="-text--truncate">child-name-1</div>
              </div>
            </div>
            <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
              <div class="-w--100">
                <div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
              </div>
            </div>
          </div>
          <div id="row-dt-1-name-1-0-content">
            <div id="row-dt-1-name-1-0" data-rownumber="0-0-0" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
              <div role="cell" class="chi-data-table__cell -expandable"></div>
              <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
                <div class="-w--100">
                  <div class="-text--truncate">Child Name 1</div>
                </div>
              </div>
              <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
                <div class="-w--100">
                  <div class="-text--truncate">child-name-1</div>
                </div>
              </div>
              <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
                <div class="-w--100">
                  <div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
                </div>
              </div>
            </div>
            <div id="row-dt-1-name-1-1" data-rownumber="0-0-1" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
              <div role="cell" class="chi-data-table__cell -expandable"></div>
              <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
                <div class="-w--100">
                  <div class="-text--truncate">Child Name 2</div>
                </div>
              </div>
              <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
                <div class="-w--100">
                  <div class="-text--truncate">child-name-2</div>
                </div>
              </div>
              <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
                <div class="-w--100">
                  <div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
                </div>
              </div>
            </div>
          </div>
          <div id="row-dt-1-name-1-1" data-rownumber="0-1" data-rowlevel="1" role="row" class="chi-data-table__row-child -md -collapsed">
            <div class="chi-data-table__cell -expandable"></div>
            <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
              <button aria-label="Expand row" data-target="#row-dt-1-name-1-1-content" class="chi-button -icon -flat -expand -xs">
                <div class="chi-button__content">
                  <i class="chi-icon icon-plus"></i>
                </div>
                <span class="-sr--only">Expand Row</span>
              </button>
              <div class="-w--100">
                <div class="-text--truncate">Child Name 2</div>
              </div>
            </div>
            <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
              <div class="-w--100">
                <div class="-text--truncate">child-name-2</div>
              </div>
            </div>
            <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
              <div class="-w--100">
                <div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
              </div>
            </div>
          </div>
          <div id="row-dt-1-name-1-1-content" style="display: none;">
            <div id="row-dt-1-name-1-0" data-rownumber="0-1-0" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
              <div role="cell" class="chi-data-table__cell -expandable"></div>
              <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
                <div class="-w--100">
                  <div class="-text--truncate">Child Name 1</div>
                </div>
              </div>
              <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
                <div class="-w--100">
                  <div class="-text--truncate">child-name-1</div>
                </div>
              </div>
              <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
                <div class="-w--100">
                  <div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
                </div>
              </div>
            </div>
            <div id="row-dt-1-name-1-1" data-rownumber="0-1-1" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
              <div role="cell" class="chi-data-table__cell -expandable"></div>
              <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
                <div class="-w--100">
                  <div class="-text--truncate">Child Name 2</div>
                </div>
              </div>
              <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
                <div class="-w--100">
                  <div class="-text--truncate">child-name-2</div>
                </div>
              </div>
              <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
                <div class="-w--100">
                  <div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
                </div>
              </div>
            </div>
          </div>
        </div>


        <div id="row-dt-1-name-2" data-rownumber="1" data-rowlevel="0" role="row" class="chi-data-table__row -striped -md -collapsed">
          <div role="cell" class="chi-data-table__cell -expandable">
            <button aria-label="Expand row" data-target="#row-dt-1-name-2-content" class="chi-button -icon -flat -expand -xs">
              <div class="chi-button__content">
                <i class="chi-icon icon-plus"></i>
              </div>
              <span class="-sr--only">Expand Row</span>
            </button>
          </div>
          <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
            <div class="-w--100">
              <div class="-text--truncate">Name 2</div>
            </div>
          </div>
          <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
            <div class="-w--100">
              <div class="-text--truncate">name-2</div>
            </div>
          </div>
          <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
            <div class="-w--100">
              <div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
            </div>
          </div>
        </div>
        <div id="row-dt-1-name-2-content" style="display: none;">
          <div id="row-dt-1-name-2-0" data-rownumber="1-0" data-rowlevel="1" role="row" class="chi-data-table__row-child -md -collapsed">
            <div class="chi-data-table__cell -expandable"></div>
            <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
              <button aria-label="Expand row" data-target="#row-dt-1-name-2-0-content" class="chi-button -icon -flat -expand -xs">
                <div class="chi-button__content">
                  <i class="chi-icon icon-plus"></i>
                </div>
                <span class="-sr--only">Expand Row</span>
              </button>
              <div class="-w--100">
                <div class="-text--truncate">Child Name 1</div>
              </div>
            </div>
            <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
              <div class="-w--100">
                <div class="-text--truncate">child-name-1</div>
              </div>
            </div>
            <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
              <div class="-w--100">
                <div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
              </div>
            </div>
          </div>
          <div id="row-dt-1-name-2-0-content" style="display: none;">
            <div id="row-dt-1-name-1-0" data-rownumber="1-0-0" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
              <div role="cell" class="chi-data-table__cell -expandable"></div>
              <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
                <div class="-w--100">
                  <div class="-text--truncate">Child Name 1</div>
                </div>
              </div>
              <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
                <div class="-w--100">
                  <div class="-text--truncate">child-name-1</div>
                </div>
              </div>
              <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
                <div class="-w--100">
                  <div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
                </div>
              </div>
            </div>
            <div id="row-dt-1-name-1-1" data-rownumber="1-0-1" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
              <div role="cell" class="chi-data-table__cell -expandable"></div>
              <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
                <div class="-w--100">
                  <div class="-text--truncate">Child Name 2</div>
                </div>
              </div>
              <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
                <div class="-w--100">
                  <div class="-text--truncate">child-name-2</div>
                </div>
              </div>
              <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
                <div class="-w--100">
                  <div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
                </div>
              </div>
            </div>
          </div>
          <div id="row-dt-1-name-2-1" data-rownumber="1-1" data-rowlevel="1" role="row" class="chi-data-table__row-child -md -collapsed">
            <div class="chi-data-table__cell -expandable"></div>
            <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
              <button aria-label="Expand row" data-target="#row-dt-1-name-2-1-content" class="chi-button -icon -flat -expand -xs">
                <div class="chi-button__content">
                  <i class="chi-icon icon-plus"></i>
                </div>
                <span class="-sr--only">Expand Row</span>
              </button>
              <div class="-w--100">
                <div class="-text--truncate">Child Name 2</div>
              </div>
            </div>
            <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
              <div class="-w--100">
                <div class="-text--truncate">child-name-2</div>
              </div>
            </div>
            <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
              <div class="-w--100">
                <div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
              </div>
            </div>
          </div>
          <div id="row-dt-1-name-2-1-content" style="display: none;">
            <div id="row-dt-1-name-1-0" data-rownumber="1-1-0" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
              <div role="cell" class="chi-data-table__cell -expandable"></div>
              <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
                <div class="-w--100">
                  <div class="-text--truncate">Child Name 1</div>
                </div>
              </div>
              <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
                <div class="-w--100">
                  <div class="-text--truncate">child-name-1</div>
                </div>
              </div>
              <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
                <div class="-w--100">
                  <div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
                </div>
              </div>
            </div>
            <div id="row-dt-1-name-1-1" data-rownumber="1-1-1" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
              <div role="cell" class="chi-data-table__cell -expandable"></div>
              <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
                <div class="-w--100">
                  <div class="-text--truncate">Child Name 2</div>
                </div>
              </div>
              <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
                <div class="-w--100">
                  <div class="-text--truncate">child-name-2</div>
                </div>
              </div>
              <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
                <div class="-w--100">
                  <div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div id="row-dt-1-name-3" data-rownumber="2" data-rowlevel="0" role="row" class="chi-data-table__row -md -collapsed">
          <div role="cell" class="chi-data-table__cell -expandable">
            <button aria-label="Expand row" data-target="#row-dt-1-name-3-content" class="chi-button -icon -flat -expand -xs">
              <div class="chi-button__content">
                <i class="chi-icon icon-plus"></i>
              </div>
              <span class="-sr--only">Expand Row</span>
            </button>
          </div>
          <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
            <div class="-w--100">
              <div class="-text--truncate">Name 3</div>
            </div>
          </div>
          <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
            <div class="-w--100">
              <div class="-text--truncate">name-3</div>
            </div>
          </div>
          <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
            <div class="-w--100">
              <div class="-text--truncate">5 Nov 2020 10:15 a.m.</div>
            </div>
          </div>
        </div>
        <div id="row-dt-1-name-3-content" style="display: none;">
          <div id="row-dt-1-name-3-0" data-rownumber="2-0" data-rowlevel="1" role="row" class="chi-data-table__row-child -md -collapsed">
            <div class="chi-data-table__cell -expandable"></div>
            <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
              <button aria-label="Expand row" data-target="#row-dt-1-name-3-0-content" class="chi-button -icon -flat -expand -xs">
                <div class="chi-button__content">
                  <i class="chi-icon icon-plus"></i>
                </div>
                <span class="-sr--only">Expand Row</span>
              </button>
              <div class="-w--100">
                <div class="-text--truncate">Child Name 1</div>
              </div>
            </div>
            <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
              <div class="-w--100">
                <div class="-text--truncate">child-name-1</div>
              </div>
            </div>
            <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
              <div class="-w--100">
                <div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
              </div>
            </div>
          </div>
          <div id="row-dt-1-name-3-0-content" style="display: none;">
            <div id="row-dt-1-name-1-0" data-rownumber="2-0-0" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
              <div role="cell" class="chi-data-table__cell -expandable"></div>
              <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
                <div class="-w--100">
                  <div class="-text--truncate">Child Name 1</div>
                </div>
              </div>
              <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
                <div class="-w--100">
                  <div class="-text--truncate">child-name-1</div>
                </div>
              </div>
              <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
                <div class="-w--100">
                  <div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
                </div>
              </div>
            </div>
            <div id="row-dt-1-name-1-1" data-rownumber="2-0-1" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
              <div role="cell" class="chi-data-table__cell -expandable"></div>
              <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
                <div class="-w--100">
                  <div class="-text--truncate">Child Name 2</div>
                </div>
              </div>
              <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
                <div class="-w--100">
                  <div class="-text--truncate">child-name-2</div>
                </div>
              </div>
              <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
                <div class="-w--100">
                  <div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
                </div>
              </div>
            </div>
          </div>
          <div id="row-dt-1-name-3-1" data-rownumber="2-1" data-rowlevel="1" role="row" class="chi-data-table__row-child -md -collapsed">
            <div class="chi-data-table__cell -expandable"></div>
            <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
              <button aria-label="Expand row" data-target="#row-dt-1-name-3-1-content" class="chi-button -icon -flat -expand -xs">
                <div class="chi-button__content">
                  <i class="chi-icon icon-plus"></i>
                </div>
                <span class="-sr--only">Expand Row</span>
              </button>
              <div class="-w--100">
                <div class="-text--truncate">Child Name 2</div>
              </div>
            </div>
            <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
              <div class="-w--100">
                <div class="-text--truncate">child-name-2</div>
              </div>
            </div>
            <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
              <div class="-w--100">
                <div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
              </div>
            </div>
          </div>
          <div id="row-dt-1-name-3-1-content" style="display: none;">
            <div id="row-dt-1-name-1-0" data-rownumber="2-1-0" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
              <div role="cell" class="chi-data-table__cell -expandable"></div>
              <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
                <div class="-w--100">
                  <div class="-text--truncate">Child Name 1</div>
                </div>
              </div>
              <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
                <div class="-w--100">
                  <div class="-text--truncate">child-name-1</div>
                </div>
              </div>
              <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
                <div class="-w--100">
                  <div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
                </div>
              </div>
            </div>
            <div id="row-dt-1-name-1-1" data-rownumber="2-1-1" data-rowlevel="2" role="row" class="chi-data-table__row-grand-child -md">
              <div role="cell" class="chi-data-table__cell -expandable"></div>
              <div aria-label="Name" data-label="Name" role="cell" class="chi-data-table__cell -key -bold">
                <div class="-w--100">
                  <div class="-text--truncate">Child Name 2</div>
                </div>
              </div>
              <div aria-label="ID" data-label="ID" role="cell" class="chi-data-table__cell -key">
                <div class="-w--100">
                  <div class="-text--truncate">child-name-2</div>
                </div>
              </div>
              <div aria-label="Last Login" data-label="Last Login" role="cell" class="chi-data-table__cell">
                <div class="-w--100">
                  <div class="-text--truncate">18 Dec 2020 2:38 a.m.</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="chi-data-table__footer">
        <nav class="chi-pagination -compact" role="navigation" aria-label="Pagination">
          <div class="chi-pagination__content">
            <div class="chi-pagination__start">
              <div class="chi-pagination__results">
                <span class="chi-pagination__label">240 Results</span>
              </div>
            </div>
            <div class="chi-pagination__center">
              <div class="chi-pagination__button-group chi-button-group">
                <button class="chi-button -icon -flat -primary -xs" aria-label="First page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-page-first" aria-hidden="true"></i>
                  </div>
                </button>
                <button class="chi-button -icon -flat -primary -xs" aria-label="Previous page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
                  </div>
                </button>
              </div>
              <div class="chi-pagination__label">
                <strong>2</strong>
                <span>of</span>
                <strong>3</strong>
              </div>
              <div class="chi-pagination__button-group chi-button-group">
                <button class="chi-button -icon -flat -primary -xs" aria-label="Next page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
                  </div>
                </button>
                <button class="chi-button -icon -flat -primary -xs" aria-label="Last page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-page-last" aria-hidden="true"></i>
                  </div>
                </button>
              </div>
            </div>
            <div class="chi-pagination__end"></div>
          </div>
        </nav>
      </div>
    </div>
  </div>

Two tier header

Title
Location
High Utilization
Elevated Utilization
Highest %
Total
%
Total
%
Location 1
3
98%
-
-
98%
Location 2
1
98%
3
67%
98%
Location 3
-
-
2
66
66%
<div class="chi-card -portal -bg--white -bg-md--grey-15">
  <div class="chi-card__header -sm">
    <div class="chi-card__title">Title</div>
  </div>
  <div class="chi-card__content -p--0">
    <div class="chi-data-table -portal -compact">
      <div class="chi-data-table__head">
        <div class="chi-data-table__row">
          <div class="chi-data-table__cell -justify-content-md--start -sorting" aria-label="Sort Column Location"
            data-column="location" data-sort="ascending" data-label="Location">
            Location
            <chi-button variant="flat" type="icon>
              <chi-icon icon="arrow-up" size="xs"></chi-icon>
            </chi-button>
          </div>
          <div class="chi-data-table__cell -justify-content-md--start -sorting" aria-label="Sort Column High Utilization"
            data-column="highUtilization" data-sort="ascending" data-label="High Utilization">
            High Utilization
            <chi-button variant="flat" type="icon>
              <chi-icon icon="arrow-sort" size="xs"></chi-icon>
            </chi-button>
          </div>
          <div class="chi-data-table__cell -justify-content-md--start -sorting" aria-label="Sort Column Elevated Utilization"
            data-column="elevatedUtilization" data-sort="ascending" data-label="Elevated Utilization">
            Elevated Utilization
            <chi-button variant="flat" type="icon>
              <chi-icon icon="arrow-sort" size="xs"></chi-icon>
            </chi-button>
          </div>
          <div class="chi-data-table__cell -justify-content-md--start -sorting" aria-label="Sort Column Highest %"
            data-column="highest" data-sort="ascending" data-label="Highest %">
            Highest %
            <chi-button variant="flat" type="icon>
              <chi-icon icon="arrow-sort" size="xs"></chi-icon>
            </chi-button>
          </div>
        </div>
        <div class="chi-data-table__row">
          <div class="chi-data-table__cell"></div>
          <div class="chi-data-table__cell">
            <div class="-associated">Total</div>
            <div class="-associated">%</div>
          </div>
          <div class="chi-data-table__cell">
            <div class="-associated">Total</div>
            <div class="-associated">%</div>
          </div>
          <div class="chi-data-table__cell"></div>
        </div>
      </div>
      <div class="chi-data-table__body">
        <div class="chi-data-table__row -md">
          <div class="chi-data-table__cell -key -bold">
            <div>Location 1</div>
          </div>
          <div class="chi-data-table__cell">
            <div class="-associated">3</div>
            <div class="-associated">98%</div>
          </div>
          <div class="chi-data-table__cell">
            <div class="-associated">-</div>
            <div class="-associated">-</div>
          </div>
          <div class="chi-data-table__cell">
            <div>98%</div>
          </div>
        </div>
        <div class="chi-data-table__row -striped -md">
          <div class="chi-data-table__cell -key -bold">
            <div>Location 2</div>
          </div>
          <div class="chi-data-table__cell">
            <div class="-associated">1</div>
            <div class="-associated">98%</div>
          </div>
          <div class="chi-data-table__cell">
            <div class="-associated">3</div>
            <div class="-associated">67%</div>
          </div>
          <div class="chi-data-table__cell">
            <div>98%</div>
          </div>
        </div>
        <div class="chi-data-table__row -md">
          <div class="chi-data-table__cell -key -bold">
            <div>Location 3</div>
          </div>
          <div class="chi-data-table__cell">
            <div class="-associated">-</div>
            <div class="-associated">-</div>
          </div>
          <div class="chi-data-table__cell">
            <div class="-associated">2</div>
            <div class="-associated">66</div>
          </div>
          <div class="chi-data-table__cell">
            <div>66%</div>
          </div>
        </div>
      </div>
      <div class="chi-data-table__footer">
        <nav class="chi-pagination -compact" role="navigation" aria-label="Pagination">
          <div class="chi-pagination__content">
            <div class="chi-pagination__start">
              <div class="chi-pagination__results">
                <span class="chi-pagination__label">240 Results</span>
              </div>
            </div>
            <div class="chi-pagination__center">
              <div class="chi-pagination__button-group chi-button-group">
                <button class="chi-button -icon -flat -primary -xs" aria-label="First page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-page-first" aria-hidden="true"></i>
                  </div>
                </button>
                <button class="chi-button -icon -flat -primary -xs" aria-label="Previous page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
                  </div>
                </button>
              </div>
              <div class="chi-pagination__label">
                <strong>2</strong>
                <span>of</span>
                <strong>3</strong>
              </div>
              <div class="chi-pagination__button-group chi-button-group">
                <button class="chi-button -icon -flat -primary -xs" aria-label="Next page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
                  </div>
                </button>
                <button class="chi-button -icon -flat -primary -xs" aria-label="Last page">
                  <div class="chi-button__content">
                    <i class="chi-icon icon-page-last" aria-hidden="true"></i>
                  </div>
                </button>
              </div>
            </div>
            <div class="chi-pagination__end"></div>
          </div>
        </nav>
      </div>
    </div>
  </div>
</div>

Chi Vue

Props

Property
Description
Interface
Default
config
To customize Data table behavior and style
{
  columnResize?: boolean;
  columnSizes?: {
    xs: number[];
    sm: number[];
    md: number[];
    lg: number[];
    xl: number[];
  };
  defaultSort?: DataTableSortConfig;
  unsorted?: boolean;
  mode?: 'clientside' | 'serverside';
  noResultsMessage?: string;
  noFiltersMessage?: string;
  pagination: {
    activePage?: number;
    compact?: boolean;
    firstLast?: boolean;
    hideOnSinglePage?: boolean;
    pages?: number;
    pageJumper?: boolean;
    results?: number;
  };
  resultsPerPage?: number;
  style: DataTableStyleConfig;
  selectable?: boolean | 'radio';
  reserveExpansionSlot?: boolean;
  truncation?: boolean;
  print?: {
    mode?: 'full' | 'printonly' | 'screenonly';
    isNestedContentPrintDisabled?: boolean;
  },
  treeSelection: boolean;
  cellWrap: boolean;
  showExpandAll: boolean;
  showSelectAllDropdown: boolean;
}
undefined
data
To provide Data Table with Head and Body related data
{
  head: {
    [code: string]: {
      label: string;
      sortable?: boolean;
      sortBy?: string;
      sortDataType?: 'string' | 'number' | 'date' | 'boolean';
      align?: 'left' | 'center' | 'right';
      allowOverflow?: 'visible' | 'hidden';
      key?: boolean;
      bold?: boolean;
      description?: string | DataTableColumnDescription;
      isPrintDisabled?: boolean;
    };
  };
  body: DataTableRow[];
}
undefined

Interfaces and types

Name
Interface
DataTableRow
interface DataTableRow {
  active: boolean;
  expanded: boolean;
  data: Record <string, any>;
  nestedContent: {
    table: {
      data: DataTableRow[];
    };
    template: string;
    value: string;
    payload: any;
  };
  id: string;
  selected?: boolean;
  selectionDisabled?: boolean;
  print?: {
    isNestedContentPrintDisabled?: boolean;
  };
}
DataTableStyleConfig
interface DataTableStyleConfig {
  portal?: boolean;
  compact?: boolean;
  bordered?: boolean;
  noBorder?: boolean;
  hover?: boolean;
  striped?: boolean;
  size?: DataTableSizes;
}
DataTableSortConfig
interface DataTableSortConfig {
  key: string;
  sortBy?: string;
  direction: 'ascending' | 'descending';
}
DataTableSizes
'xs' | 'sm' | 'md' | 'lg' | 'xl'
DataTableColumnDescription
interface DataTableColumnDescription {
  title?: string;
  text?: string;
  template?: string;
  payload?: any;
}

Methods

Method
Description
Returns
Parameters
toggleRow() => Promise<void>
To expand / collapse specific rows
Type: Promise
rowId: string
print() => void
To print the data table
Type: void
title: string

Events

Event
Description
Type
chiDataSorting
The user has sorted the table by a specific column
{
  column: string | undefined;
  direction: 'ascending' | 'descending' | undefined;
  data?: DataTableRow[];
}
chiPageChange
The user changed active page
{
  page: number;
  data?: DataTableRow[];
}
chiRowExpanded
The user expanded a row
DataTableRow
chiRowCollapsed
The user collapsed a row
DataTableRow
chiSelectAll
Deprecated
The user selected all the rows on the page
DataTableRow[]
chiSelectThisPage
The user selected all the rows on the page
DataTableRow[]
chiDeselectAll
Deprecated
The user deselected all the rows on the page
DataTableRow[]
chiDeselectThisPage
The user deselected all the rows on the page
DataTableRow[]
chiSelectAllPages
The user selected all the rows on the table
DataTableRow[]
chiDeselectAllPages
The user deselected all the rows on the table
DataTableRow[]
chiRowSelected
The user selected a row
DataTableRow
chiRowDeselected
The user deselected a row
DataTableRow
chiShowSelectedRowsOnly
The user selected show selected only from bulk actions
DataTableRow[]
chiCancel
The user cancelled bulk actions
undefined
chiExpandAll
The user expands all the rows on the page
DataTableRow[]
chiCollapseAll
The user collapses all the rows on the page
DataTableRow[]

Accessibility

Accessibility guidelines coming soon