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" :dataTableData="table" ref="dataTableComplex">
  <template v-slot: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 v-slot:name="payload">
    <ExamplePopover :name="payload.name" :id="payload.id" />
  </template>
  <template v-slot:toolbar>
    <ChiDataTableToolbar>
      <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>
    </ChiDataTableToolbar>
  </template>
  <template v-slot:bulk-actions>
    <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';

<!-- Config and Data -->
data() {
  return {
    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,
      actions: [
      {
          label: 'View',
          icon: 'icon-check-alt',
          onClick: (props) => {
            console.log(JSON.stringify(props));
          },
        },
        {
          label: 'Edit',
          icon: 'icon-edit',
          onClick: () => console.log(`Edited`),
        },
        {
          label: 'Download',
          icon: 'icon-circle-arrow-down',
          hide: ['desktop'],
          onClick: () => console.log(`downloaded`),
        },
        {
          label: 'Delete',
          icon: 'icon-delete',
          onClick: () => console.log('deleted'),
        },
      ],
    },
    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.' },
        userID: { label: 'User ID', key: true, icon: 'user' },
        lastLogin: { label: 'Last Login', key: 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" },
            },
            "user-name-1",
            "18 Dec 2020 3:26 p.m.",
          ],
          nestedContent: {
            table: {
              data: [
                {
                  id: "child-1-name-1",
                  data: [
                    "Child 1 Name 1",
                    {
                      template: "status",
                      payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                    },
                    "user-name-1",
                    "18 Dec 2020 2:38 a.m.",
                  ],
                  nestedContent: {
                    table: {
                      data: [
                        {
                          id: "grandchild-1-name-1",
                          data: [
                            "Grand Child 1 Name 1",
                            {
                              template: "status",
                              payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                            },
                            "user-name-1",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                        {
                          id: "grandchild-2-name-1",
                          data: [
                            "Grand Child 2 Name 1",
                            {
                              template: "status",
                              payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                            },
                            "user-name-1",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                      ],
                    },
                  },
                },
                {
                  id: "child-2-name-1",
                  data: [
                    "Child 2 Name 1",
                    {
                      template: "status",
                      payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                    },
                    "user-name-1",
                    "18 Dec 2020 2:38 a.m.",
                  ],
                  nestedContent: {
                    table: {
                      data: [
                        {
                          id: "grandchild-3-name-1",
                          data: [
                            "Grand Child 3 Name 1",
                            {
                              template: "status",
                              payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                            },
                            "user-name-1",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                        {
                          id: "grandchild-4-name-1",
                          data: [
                            "Grand Child 4 Name 1",
                            {
                              template: "status",
                              payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                            },
                            "user-name-1",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                      ],
                    },
                  },
                },
              ],
            },
          },
        },
        {
          id: "name-2",
          data: [
            { template: "name", payload: { name: "Name 2", id: "name-2" } },
            {
              template: "status",
              payload: { status: "Due", icon: 'warning', color: 'warning' },
            },
            "user-name-2",
            "18 Dec 2020 3:26 p.m.",
          ],
          nestedContent: {
            table: {
              data: [
                {
                  id: "child-1-name-2",
                  data: [
                    "Child 1 Name 2",
                    {
                      template: "status",
                      payload: { status: "Due", icon: 'warning', color: 'warning' },
                    },
                    "user-name-2",
                    "18 Dec 2020 2:38 a.m.",
                  ],
                  nestedContent: {
                    table: {
                      data: [
                        {
                          id: "grandchild-1-name-2",
                          data: [
                            "Grand Child 1 Name 2",
                            {
                              template: "status",
                              payload: { status: "Due", icon: 'warning', color: 'warning' },
                            },
                            "user-name-2",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                        {
                          id: "grandchild-2-name-2",
                          data: [
                            "Grand Child 2 Name 2",
                            {
                              template: "status",
                              payload: { status: "Due", icon: 'warning', color: 'warning' },
                            },
                            "user-name-2",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                      ],
                    },
                  },
                },
                {
                  id: "child-2-name-2",
                  data: [
                    "Child 2 Name 2",
                    {
                      template: "status",
                      payload: { status: "Due", icon: 'warning', color: 'warning' },
                    },
                    "user-name-2",
                    "18 Dec 2020 2:38 a.m.",
                  ],
                  nestedContent: {
                    table: {
                      data: [
                        {
                          id: "grandchild-3-name-2",
                          data: [
                            "Grand Child 3 Name 2",
                            {
                              template: "status",
                              payload: { status: "Due", icon: 'warning', color: 'warning' },
                            },
                            "user-name-2",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                        {
                          id: "grandchild-4-name-2",
                          data: [
                            "Grand Child 4 Name 2",
                            {
                              template: "status",
                              payload: { status: "Due", icon: 'warning', color: 'warning' },
                            },
                            "user-name-2",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                      ],
                    },
                  },
                },
              ],
            },
          },
        },
        {
          id: "name-3",
          data: [
            {
              template: "name",
              payload: {
                name: "Name 3",
                id: "name-3",
              },
            },
            {
              template: "status",
              payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
            },
            "user-name-3",
            "18 Dec 2020 3:26 p.m.",
          ],
          nestedContent: {
            table: {
              data: [
                {
                  id: "child-1-name-3",
                  data: [
                    "Child 1 Name 3",
                    {
                      template: "status",
                      payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                    },
                    "user-name-3",
                    "18 Dec 2020 2:38 a.m.",
                  ],
                  nestedContent: {
                    table: {
                      data: [
                        {
                          id: "grandchild-1-name-3",
                          data: [
                            "Grand Child 1 Name 3",
                            {
                              template: "status",
                              payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                            },
                            "user-name-3",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                        {
                          id: "grandchild-2-name-3",
                          data: [
                            "Grand Child 2 Name 3",
                            {
                              template: "status",
                              payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                            },
                            "user-name-3",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                      ],
                    },
                  },
                },
                {
                  id: "child-2-name-3",
                  data: [
                    "Child 2 Name 3",
                    {
                      template: "status",
                      payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                    },
                    "user-name-3",
                    "18 Dec 2020 2:38 a.m.",
                  ],
                  nestedContent: {
                    table: {
                      data: [
                        {
                          id: "grandchild-3-name-3",
                          data: [
                            "Grand Child 3 Name 3",
                            {
                              template: "status",
                              payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                            },
                            "user-name-3",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                        {
                          id: "grandchild-4-name-3",
                          data: [
                            "Grand Child 4 Name 3",
                            {
                              template: "status",
                              payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                            },
                            "user-name-3",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                      ],
                    },
                  },
                },
              ],
            },
          },
        },
        {
          id: "name-4",
          data: [
            {
              template: "name",
              payload: {
                name: "Name 4",
                id: "name-4",
              },
            },
            {
              template: "status",
              payload: { status: "Due", icon: 'warning', color: 'warning' },
            },
            "user-name-4",
            "18 Dec 2020 3:26 p.m.",
          ],
          nestedContent: {
            table: {
              data: [
                {
                  id: "child-1-name-4",
                  data: [
                    "Child 1 Name 4",
                    {
                      template: "status",
                      payload: { status: "Due", icon: 'warning', color: 'warning' },
                    },
                    "user-name-4",
                    "18 Dec 2020 2:38 a.m.",
                  ],
                  nestedContent: {
                    table: {
                      data: [
                        {
                          id: "grandchild-1-name-4",
                          data: [
                            "Grand Child 1 Name 4",
                            {
                              template: "status",
                              payload: { status: "Due", icon: 'warning', color: 'warning' },
                            },
                            "user-name-4",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                        {
                          id: "grandchild-2-name-4",
                          data: [
                            "Grand Child 2 Name 4",
                            {
                              template: "status",
                              payload: { status: "Due", icon: 'warning', color: 'warning' },
                            },
                            "user-name-4",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                      ],
                    },
                  },
                },
                {
                  id: "child-2-name-4",
                  data: [
                    "Child 2 Name 4",
                    {
                      template: "status",
                      payload: { status: "Due", icon: 'warning', color: 'warning' },
                    },
                    "user-name-4",
                    "18 Dec 2020 2:38 a.m.",
                  ],
                  nestedContent: {
                    table: {
                      data: [
                        {
                          id: "grandchild-3-name-4",
                          data: [
                            "Grand Child 3 Name 4",
                            {
                              template: "status",
                              payload: { status: "Due", icon: 'warning', color: 'warning' },
                            },
                            "user-name-4",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                        {
                          id: "grandchild-4-name-4",
                          data: [
                            "Grand Child 4 Name 4",
                            {
                              template: "status",
                              payload: { status: "Due", icon: 'warning', color: 'warning' },
                            },
                            "user-name-4",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                      ],
                    },
                  },
                },
              ],
            },
          },
        },
        {
          id: "name-5",
          data: [
            {
              template: "name",
              payload: {
                name: "Name 5",
                id: "name-5",
              },
            },
            {
              template: "status",
              payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
            },
            "user-name-5",
            "18 Dec 2020 3:26 p.m.",
          ],
          nestedContent: {
            table: {
              data: [
                {
                  id: "child-1-name-5",
                  data: [
                    "Child 1 Name 5",
                    {
                      template: "status",
                      payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                    },
                    "user-name-5",
                    "18 Dec 2020 2:38 a.m.",
                  ],
                  nestedContent: {
                    table: {
                      data: [
                        {
                          id: "grandchild-1-name-5",
                          data: [
                            "Grand Child 1 Name 5",
                            {
                              template: "status",
                              payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                            },
                            "user-name-5",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                        {
                          id: "grandchild-2-name-5",
                          data: [
                            "Grand Child 2 Name 5",
                            {
                              template: "status",
                              payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                            },
                            "user-name-5",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                      ],
                    },
                  },
                },
                {
                  id: "child-2-name-5",
                  data: [
                    "Child 2 Name 5",
                    {
                      template: "status",
                      payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                    },
                    "user-name-5",
                    "18 Dec 2020 2:38 a.m.",
                  ],
                  nestedContent: {
                    table: {
                      data: [
                        {
                          id: "grandchild-3-name-5",
                          data: [
                            "Grand Child 3 Name 5",
                            {
                              template: "status",
                              payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                            },
                            "user-name-5",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                        {
                          id: "grandchild-4-name-5",
                          data: [
                            "Grand Child 4 Name 5",
                            {
                              template: "status",
                              payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                            },
                            "user-name-5",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                      ],
                    },
                  },
                },
              ],
            },
          },
        },
        {
          id: "name-6",
          data: [
            {
              template: "name",
              payload: {
                name: "Name 6",
                id: "name-6",
              },
            },
            {
              template: "status",
              payload: { status: "Due", icon: 'warning', color: 'warning' },
            },
            "user-name-6",
            "18 Dec 2020 3:26 p.m.",
          ],
          nestedContent: {
            table: {
              data: [
                {
                  id: "child-1-name-6",
                  data: [
                    "Child 1 Name 6",
                    {
                      template: "status",
                      payload: { status: "Due", icon: 'warning', color: 'warning' },
                    },
                    "user-name-6",
                    "18 Dec 2020 2:38 a.m.",
                  ],
                  nestedContent: {
                    table: {
                      data: [
                        {
                          id: "grandchild-1-name-6",
                          data: [
                            "Grand Child 1 Name 6",
                            {
                              template: "status",
                              payload: { status: "Due", icon: 'warning', color: 'warning' },
                            },
                            "user-name-6",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                        {
                          id: "grandchild-2-name-6",
                          data: [
                            "Grand Child 2 Name 6",
                            {
                              template: "status",
                              payload: { status: "Due", icon: 'warning', color: 'warning' },
                            },
                            "user-name-6",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                      ],
                    },
                  },
                },
                {
                  id: "child-2-name-6",
                  data: [
                    "Child 2 Name 6",
                    {
                      template: "status",
                      payload: { status: "Due", icon: 'warning', color: 'warning' },
                    },
                    "user-name-6",
                    "18 Dec 2020 2:38 a.m.",
                  ],
                  nestedContent: {
                    table: {
                      data: [
                        {
                          id: "grandchild-3-name-6",
                          data: [
                            "Grand Child 3 Name 6",
                            {
                              template: "status",
                              payload: { status: "Due", icon: 'warning', color: 'warning' },
                            },
                            "user-name-6",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                        {
                          id: "grandchild-4-name-6",
                          data: [
                            "Grand Child 4 Name 6",
                            {
                              template: "status",
                              payload: { status: "Due", icon: 'warning', color: 'warning' },
                            },
                            "user-name-6",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                      ],
                    },
                  },
                },
              ],
            },
          },
        },
      ],
    },
  }
},
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();
}

Base#

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

<!-- Config and Data -->
data() {
  return {
    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" :dataTableData="table"></ChiDataTable>

<!-- Config and Data -->
data() {
  return {
    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" :dataTableData="table"></ChiDataTable>

<!-- Config and Data -->
data() {
  return {
    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>

Empty Actionable#

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

<!-- Config and Data -->
data() {
  return {
    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,
      emptyActionable: {
        isActionable: true,
      },
    },
    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 -actionable">
      <div>
        <i class="chi-icon icon-circle-plus-outline -icon--grey" aria-hidden="true"></i>
        <span>
          <a>Add a new or existing service</a>, then manage here.
        </span>
      </div>
    </div>
  </div>
</div>

No Border#

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

<!-- Config and Data -->
data() {
  return {
    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" :dataTableData="table"></ChiDataTable>

<!-- Config and Data -->
data() {
  return {
    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" :dataTableData="table"></ChiDataTable>

<!-- Config and Data -->
data() {
  return {
    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" :dataTableData="table"></ChiDataTable>

<!-- Config and Data -->
data() {
  return {
    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" :dataTableData="table"></ChiDataTable>

<!-- Config and Data -->
data() {
  return {
    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" :dataTableData="table"></ChiDataTable>

<!-- Config and Data -->
data() {
  return {
    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" :dataTableData="table"></ChiDataTable>

<!-- Config and Data -->
data() {
  return {
    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" :dataTableData="table"></ChiDataTable>

<!-- Config and Data -->
data() {
  return {
    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" :dataTableData="table"></ChiDataTable>

<!-- Config and Data -->
data() {
  return {
    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" :dataTableData="table"></ChiDataTable>

<!-- Config and Data -->
data() {
  return {
    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" :dataTableData="table"></ChiDataTable>

<!-- Config and Data -->
data() {
  return {
    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" :dataTableData="table"></ChiDataTable>

<!-- Config and Data -->
data() {
  return {
    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" :dataTableData="table"></ChiDataTable>

<!-- Config and Data -->
data() {
  return {
    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" :dataTableData="table"></ChiDataTable>

<!-- Config and Data -->
data() {
  return {
    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" :dataTableData="table"></ChiDataTable>

<!-- Config and Data -->
data() {
  return {
    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" :dataTableData="table"></ChiDataTable>

<!-- Config and Data -->
data() {
  return {
    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" :dataTableData="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 v-slot:name="payload">
    <ExamplePopover :name="payload.name" :id="payload.id" />
  </template>
  <template v-slot:toolbar>
    <ChiDataTableToolbar>
      <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>
    </ChiDataTableToolbar>
  </template>
  <template v-slot:bulk-actions>
    <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';

<!-- Config and Data -->
data() {
  return {
    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,
      actions: [
      {
          label: 'View',
          icon: 'icon-check-alt',
          onClick: (props) => {
            console.log(JSON.stringify(props));
          },
        },
        {
          label: 'Edit',
          icon: 'icon-edit',
          onClick: () => console.log(`Edited`),
        },
        {
          label: 'Download',
          icon: 'icon-circle-arrow-down',
          hide: ['desktop'],
          onClick: () => console.log(`downloaded`),
        },
        {
          label: 'Delete',
          icon: 'icon-delete',
          onClick: () => console.log('deleted'),
        },
      ],
    },
    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.' },
        userID: { label: 'User ID', key: true, icon: 'user' },
        lastLogin: { label: 'Last Login', key: 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" },
            },
            "user-name-1",
            "18 Dec 2020 3:26 p.m.",
          ],
          nestedContent: {
            table: {
              data: [
                {
                  id: "child-1-name-1",
                  data: [
                    "Child 1 Name 1",
                    {
                      template: "status",
                      payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                    },
                    "user-name-1",
                    "18 Dec 2020 2:38 a.m.",
                  ],
                  nestedContent: {
                    table: {
                      data: [
                        {
                          id: "grandchild-1-name-1",
                          data: [
                            "Grand Child 1 Name 1",
                            {
                              template: "status",
                              payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                            },
                            "user-name-1",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                        {
                          id: "grandchild-2-name-1",
                          data: [
                            "Grand Child 2 Name 1",
                            {
                              template: "status",
                              payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                            },
                            "user-name-1",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                      ],
                    },
                  },
                },
                {
                  id: "child-2-name-1",
                  data: [
                    "Child 2 Name 1",
                    {
                      template: "status",
                      payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                    },
                    "user-name-1",
                    "18 Dec 2020 2:38 a.m.",
                  ],
                  nestedContent: {
                    table: {
                      data: [
                        {
                          id: "grandchild-3-name-1",
                          data: [
                            "Grand Child 3 Name 1",
                            {
                              template: "status",
                              payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                            },
                            "user-name-1",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                        {
                          id: "grandchild-4-name-1",
                          data: [
                            "Grand Child 4 Name 1",
                            {
                              template: "status",
                              payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                            },
                            "user-name-1",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                      ],
                    },
                  },
                },
              ],
            },
          },
        },
        {
          id: "name-2",
          data: [
            { template: "name", payload: { name: "Name 2", id: "name-2" } },
            {
              template: "status",
              payload: { status: "Due", icon: 'warning', color: 'warning' },
            },
            "user-name-2",
            "18 Dec 2020 3:26 p.m.",
          ],
          nestedContent: {
            table: {
              data: [
                {
                  id: "child-1-name-2",
                  data: [
                    "Child 1 Name 2",
                    {
                      template: "status",
                      payload: { status: "Due", icon: 'warning', color: 'warning' },
                    },
                    "user-name-2",
                    "18 Dec 2020 2:38 a.m.",
                  ],
                  nestedContent: {
                    table: {
                      data: [
                        {
                          id: "grandchild-1-name-2",
                          data: [
                            "Grand Child 1 Name 2",
                            {
                              template: "status",
                              payload: { status: "Due", icon: 'warning', color: 'warning' },
                            },
                            "user-name-2",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                        {
                          id: "grandchild-2-name-2",
                          data: [
                            "Grand Child 2 Name 2",
                            {
                              template: "status",
                              payload: { status: "Due", icon: 'warning', color: 'warning' },
                            },
                            "user-name-2",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                      ],
                    },
                  },
                },
                {
                  id: "child-2-name-2",
                  data: [
                    "Child 2 Name 2",
                    {
                      template: "status",
                      payload: { status: "Due", icon: 'warning', color: 'warning' },
                    },
                    "user-name-2",
                    "18 Dec 2020 2:38 a.m.",
                  ],
                  nestedContent: {
                    table: {
                      data: [
                        {
                          id: "grandchild-3-name-2",
                          data: [
                            "Grand Child 3 Name 2",
                            {
                              template: "status",
                              payload: { status: "Due", icon: 'warning', color: 'warning' },
                            },
                            "user-name-2",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                        {
                          id: "grandchild-4-name-2",
                          data: [
                            "Grand Child 4 Name 2",
                            {
                              template: "status",
                              payload: { status: "Due", icon: 'warning', color: 'warning' },
                            },
                            "user-name-2",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                      ],
                    },
                  },
                },
              ],
            },
          },
        },
        {
          id: "name-3",
          data: [
            {
              template: "name",
              payload: {
                name: "Name 3",
                id: "name-3",
              },
            },
            {
              template: "status",
              payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
            },
            "user-name-3",
            "18 Dec 2020 3:26 p.m.",
          ],
          nestedContent: {
            table: {
              data: [
                {
                  id: "child-1-name-3",
                  data: [
                    "Child 1 Name 3",
                    {
                      template: "status",
                      payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                    },
                    "user-name-3",
                    "18 Dec 2020 2:38 a.m.",
                  ],
                  nestedContent: {
                    table: {
                      data: [
                        {
                          id: "grandchild-1-name-3",
                          data: [
                            "Grand Child 1 Name 3",
                            {
                              template: "status",
                              payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                            },
                            "user-name-3",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                        {
                          id: "grandchild-2-name-3",
                          data: [
                            "Grand Child 2 Name 3",
                            {
                              template: "status",
                              payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                            },
                            "user-name-3",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                      ],
                    },
                  },
                },
                {
                  id: "child-2-name-3",
                  data: [
                    "Child 2 Name 3",
                    {
                      template: "status",
                      payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                    },
                    "user-name-3",
                    "18 Dec 2020 2:38 a.m.",
                  ],
                  nestedContent: {
                    table: {
                      data: [
                        {
                          id: "grandchild-3-name-3",
                          data: [
                            "Grand Child 3 Name 3",
                            {
                              template: "status",
                              payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                            },
                            "user-name-3",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                        {
                          id: "grandchild-4-name-3",
                          data: [
                            "Grand Child 4 Name 3",
                            {
                              template: "status",
                              payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                            },
                            "user-name-3",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                      ],
                    },
                  },
                },
              ],
            },
          },
        },
        {
          id: "name-4",
          data: [
            {
              template: "name",
              payload: {
                name: "Name 4",
                id: "name-4",
              },
            },
            {
              template: "status",
              payload: { status: "Due", icon: 'warning', color: 'warning' },
            },
            "user-name-4",
            "18 Dec 2020 3:26 p.m.",
          ],
          nestedContent: {
            table: {
              data: [
                {
                  id: "child-1-name-4",
                  data: [
                    "Child 1 Name 4",
                    {
                      template: "status",
                      payload: { status: "Due", icon: 'warning', color: 'warning' },
                    },
                    "user-name-4",
                    "18 Dec 2020 2:38 a.m.",
                  ],
                  nestedContent: {
                    table: {
                      data: [
                        {
                          id: "grandchild-1-name-4",
                          data: [
                            "Grand Child 1 Name 4",
                            {
                              template: "status",
                              payload: { status: "Due", icon: 'warning', color: 'warning' },
                            },
                            "user-name-4",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                        {
                          id: "grandchild-2-name-4",
                          data: [
                            "Grand Child 2 Name 4",
                            {
                              template: "status",
                              payload: { status: "Due", icon: 'warning', color: 'warning' },
                            },
                            "user-name-4",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                      ],
                    },
                  },
                },
                {
                  id: "child-2-name-4",
                  data: [
                    "Child 2 Name 4",
                    {
                      template: "status",
                      payload: { status: "Due", icon: 'warning', color: 'warning' },
                    },
                    "user-name-4",
                    "18 Dec 2020 2:38 a.m.",
                  ],
                  nestedContent: {
                    table: {
                      data: [
                        {
                          id: "grandchild-3-name-4",
                          data: [
                            "Grand Child 3 Name 4",
                            {
                              template: "status",
                              payload: { status: "Due", icon: 'warning', color: 'warning' },
                            },
                            "user-name-4",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                        {
                          id: "grandchild-4-name-4",
                          data: [
                            "Grand Child 4 Name 4",
                            {
                              template: "status",
                              payload: { status: "Due", icon: 'warning', color: 'warning' },
                            },
                            "user-name-4",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                      ],
                    },
                  },
                },
              ],
            },
          },
        },
        {
          id: "name-5",
          data: [
            {
              template: "name",
              payload: {
                name: "Name 5",
                id: "name-5",
              },
            },
            {
              template: "status",
              payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
            },
            "user-name-5",
            "18 Dec 2020 3:26 p.m.",
          ],
          nestedContent: {
            table: {
              data: [
                {
                  id: "child-1-name-5",
                  data: [
                    "Child 1 Name 5",
                    {
                      template: "status",
                      payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                    },
                    "user-name-5",
                    "18 Dec 2020 2:38 a.m.",
                  ],
                  nestedContent: {
                    table: {
                      data: [
                        {
                          id: "grandchild-1-name-5",
                          data: [
                            "Grand Child 1 Name 5",
                            {
                              template: "status",
                              payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                            },
                            "user-name-5",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                        {
                          id: "grandchild-2-name-5",
                          data: [
                            "Grand Child 2 Name 5",
                            {
                              template: "status",
                              payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                            },
                            "user-name-5",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                      ],
                    },
                  },
                },
                {
                  id: "child-2-name-5",
                  data: [
                    "Child 2 Name 5",
                    {
                      template: "status",
                      payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                    },
                    "user-name-5",
                    "18 Dec 2020 2:38 a.m.",
                  ],
                  nestedContent: {
                    table: {
                      data: [
                        {
                          id: "grandchild-3-name-5",
                          data: [
                            "Grand Child 3 Name 5",
                            {
                              template: "status",
                              payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                            },
                            "user-name-5",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                        {
                          id: "grandchild-4-name-5",
                          data: [
                            "Grand Child 4 Name 5",
                            {
                              template: "status",
                              payload: { status: "Overdue", icon: "circle-alert", color: "danger" },
                            },
                            "user-name-5",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                      ],
                    },
                  },
                },
              ],
            },
          },
        },
        {
          id: "name-6",
          data: [
            {
              template: "name",
              payload: {
                name: "Name 6",
                id: "name-6",
              },
            },
            {
              template: "status",
              payload: { status: "Due", icon: 'warning', color: 'warning' },
            },
            "user-name-6",
            "18 Dec 2020 3:26 p.m.",
          ],
          nestedContent: {
            table: {
              data: [
                {
                  id: "child-1-name-6",
                  data: [
                    "Child 1 Name 6",
                    {
                      template: "status",
                      payload: { status: "Due", icon: 'warning', color: 'warning' },
                    },
                    "user-name-6",
                    "18 Dec 2020 2:38 a.m.",
                  ],
                  nestedContent: {
                    table: {
                      data: [
                        {
                          id: "grandchild-1-name-6",
                          data: [
                            "Grand Child 1 Name 6",
                            {
                              template: "status",
                              payload: { status: "Due", icon: 'warning', color: 'warning' },
                            },
                            "user-name-6",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                        {
                          id: "grandchild-2-name-6",
                          data: [
                            "Grand Child 2 Name 6",
                            {
                              template: "status",
                              payload: { status: "Due", icon: 'warning', color: 'warning' },
                            },
                            "user-name-6",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                      ],
                    },
                  },
                },
                {
                  id: "child-2-name-6",
                  data: [
                    "Child 2 Name 6",
                    {
                      template: "status",
                      payload: { status: "Due", icon: 'warning', color: 'warning' },
                    },
                    "user-name-6",
                    "18 Dec 2020 2:38 a.m.",
                  ],
                  nestedContent: {
                    table: {
                      data: [
                        {
                          id: "grandchild-3-name-6",
                          data: [
                            "Grand Child 3 Name 6",
                            {
                              template: "status",
                              payload: { status: "Due", icon: 'warning', color: 'warning' },
                            },
                            "user-name-6",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                        {
                          id: "grandchild-4-name-6",
                          data: [
                            "Grand Child 4 Name 6",
                            {
                              template: "status",
                              payload: { status: "Due", icon: 'warning', color: 'warning' },
                            },
                            "user-name-6",
                            "18 Dec 2020 2:38 a.m.",
                          ],
                        },
                      ],
                    },
                  },
                },
              ],
            },
          },
        },
      ],
    },
  }
},
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();
}

Base#

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

<!-- Config and Data -->
data() {
  return {
    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 -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 -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 -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 -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" :dataTableData="table"></ChiDataTable>

<!-- Config and Data -->
data() {
  return {
    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: 'This is a long header content with a second line wrapping without tooltip: This is a long content for the tooltip in the wrapped cell', 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" data-label="This is a long header content with a second line wrapping without tooltip: This is a long content for the tooltip in the wrapped cell">
            <div class="-cell-wrap">This is a long header content with a second line wrapping without tooltip: This is a long content for the tooltip in the wrapped cell</div>
          </div>
          <div class="chi-data-table__cell" data-label="ID">
            <div class="-cell-wrap">ID</div>
          </div>
          <div class="chi-data-table__cell" data-label="Last Login">
            <div class="-cell-wrap">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 -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 -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 -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 -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>

State#

Title
Use state config to achieve states styling
<!-- Vue component -->
<ChiDataTable :config="config" :dataTableData="table"></ChiDataTable>

<!-- Config and Data -->
data(): {
  return: {
    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.',
          ],
          state: 'danger'
        },
        {
          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 -row--danger -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 -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 -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 -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 -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>

Empty#

No Results#

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

<!-- Config and Data -->
data() {
  return {
    config: {
      columnResize: true,
      noResultsMessage: 'No matching results',
      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' },
        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" :dataTableData="table"></ChiDataTable>

<!-- Config and Data -->
data() {
  return {
    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: true,
        firstLast: true,
        pageJumper: false,
      },
      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>

Empty Actionable#

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

<!-- Config and Data -->
data() {
  return {
    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,
      emptyActionable: {
        isActionable: true,
      },
    },
    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 -actionable">
          <div>
            <i class="chi-icon icon-circle-plus-outline -icon--grey" aria-hidden="true"></i>
            <span>
              <a>Add a new or existing service</a>, then manage here.
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Radio selection#

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

<!-- Config and Data -->
data() {
  return {
    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 -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 -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 -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 -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" :dataTableData="table"></ChiDataTable>

<!-- Config and Data -->
data() {
  return {
    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 -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 -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 -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 -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" :dataTableData="table"></ChiDataTable>

<!-- Config and Data -->
data() {
  return {
    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 -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 -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 -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 -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" :dataTableData="table"></ChiDataTable>

<!-- Config and Data -->
data() {
  return {
    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 -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 -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 -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 -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 -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 -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 -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 -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;
  actions?: DataTableAction[]
}
undefined
dataTableData
To provide Data Table with Head and Body related data
{
  head: {
    [code: string]: {
      label: string;
      icon?: 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;
  };
  state?: 'success' | 'warning' | 'danger' | 'info';
  autoExpandedAlignment?: 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;
}
DataTableAction
interface DataTableAction: {
  label: string;
  icon: string;
  onClick: (props: DataTableRow | undefined) => void;
  hide?: 'desktop' | 'tablet' | 'mobile';
}

Methods#

Method
Description
Returns
Parameters
toggleRow() => void
To expand / collapse specific rows
Type: void
row: { rowId: string }
action?: 'expand' | 'collapse'
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