Table

A table is a visual component used to display information in a structured and organized manner. It consists of rows and columns, with each intersection of a row and a column containing a cell. The cells can contain text, numbers, or other types of data, depending on the purpose of the table.

Tables can be used to display data in a clear and concise manner, making it easy for users to compare and analyze information.

Pagination and sorting are two important features of tables that help to improve the usability and user experience of the table by making it easier for users to navigate and find information within the table.

Pagination refers to the process of dividing a large table into smaller, more manageable sections or pages. This allows users to navigate through the table one page at a time, rather than having to scroll through a long list of data.

Sorting, on the other hand, refers to the process of arranging the data in a table in a specific order based on a chosen column. This allows users to quickly find the information they need by sorting the data alphabetically, numerically, or by date, for example.

Basic Usage

Use prop items to pass table data. Use prop columns to define table columns. By default table has actions column, use prop autoActionsColumn to hide it.

If prop totalPages more than 1, then table has pagination, use currentPage to change pagination page.

<template>
  <ClientOnly>
    <div class="w-full">
      <HcDataTable
        v-model:current-page="currentPage"
        :items="items"
        :columns="tableColumns"
        :auto-actions-column="false"
        :total-pages="10"
      >
        <template #custom-render-name="{ item }">
          {{ item.name }}
        </template>

        <template #custom-render-address="{ item }">
          {{ item.address }}
        </template>

        <template #custom-render-date="{ item }">
          {{ item.date }}
        </template>
      </HcDataTable>
    </div>
  </ClientOnly>
</template>

<script lang="ts" setup>
import { HcDataTable, type TableColumn } from '@deeepvision/hope-component-kit';
import { computed, ref } from 'vue';

const currentPage = ref(1);

const tableColumns = computed<TableColumn[]>(() => [
  {
    title: 'Name',
    key: 'name',
    customTemplate: true,
    width: '30%',
  },
  {
    title: 'Address',
    key: 'address',
    customTemplate: true,
    width: '40%',
  },
  {
    title: 'Date',
    key: 'date',
    customTemplate: true,
    width: '30%',
  },
]);

const items = [
  {
    date: '2016-05-03',
    name: 'Tom 1',
    address: '189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom 2',
    address: '189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom 3',
    address: '189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom 4',
    address: '189, Grove St, Los Angeles',
  },
];
</script>

Draggable Table

Use prop draggable to determinate whether table rows are draggable.

<template>
  <ClientOnly>
    <div class="w-full draggable-table">
      <HcDataTable
        :items="items"
        :columns="tableColumns"
        draggable
      >
        <template #custom-render-name="{ item }">
          <div class="flex items-center relative pl-3 text-body-2">
            <HcIcon
              name="d-drag"
              class="absolute -left-3 top-1/2 transform -translate-y-1/2 transition-colors duration-300
              w-4 h-4 cursor-grab text-overline hover:text-primary"
            />
            {{ item.name }}
          </div>
        </template>

        <template #custom-render-address="{ item }">
          <div class="text-body-2">
            {{ item.address }}
          </div>
        </template>
        <template #custom-render-date="{ item }">
          <div class="text-body-2">
            {{ item.date }}
          </div>
        </template>
      </HcDataTable>
    </div>
  </ClientOnly>
</template>

<script lang="ts" setup>
import {
  HcDataTable, HcIcon, type TableColumn,
} from '@deeepvision/hope-component-kit';
import { computed } from 'vue';

const tableColumns = computed<TableColumn[]>(() => [
  {
    title: 'Name',
    key: 'name',
    customTemplate: true,
    width: '20%',
  },
  {
    title: 'Address',
    key: 'address',
    customTemplate: true,
    width: '20%',
  },
  {
    title: 'Date',
    key: 'date',
    customTemplate: true,
    width: '20%',
  },
]);

const items = [
  {
    date: '2016-05-03',
    name: 'Tom 1',
    address: '189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom 2',
    address: '189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom 3',
    address: '189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom 4',
    address: '189, Grove St, Los Angeles',
  },
];
</script>

<style lang="postcss">
.draggable-table {
  .hc-data-table-wrapper {
    .hc-body-item-wrap:not(.hc-body-item-actions) {
      @apply flex items-center min-h-[3.125rem];
    }
  }
}
</style>

Resizable table columns

Use prop resizable to make table columns resizable. Don't use width option in item of columns (TableColumn[]), if you use resizable prop.

<template>
  <ClientOnly>
    <div>
      <div class="relative w-[39.813rem] overflow-x-auto custom-scrollbar">
        <HcDataTable
          :items="items"
          :columns="tableColumns"
          :auto-actions-column="false"
          resizable
        >
          <template #custom-render-name="{ item }">
            <div class="text-body-2">
              {{ item.name }}
            </div>
          </template>

          <template #custom-render-address="{ item }">
            <div class="text-body-2">
              {{ item.address }}
            </div>
          </template>

          <template #custom-render-date="{ item }">
            <div class="text-body-2">
              {{ item.date }}
            </div>
          </template>
        </HcDataTable>
      </div>

      <HcPagination
        v-model:current-page="currentPage"
        :total-pages="20"
        class="mt-5"
      />
    </div>
  </ClientOnly>
</template>

<script lang="ts" setup>
import {
  HcDataTable, type TableColumn, HcPagination,
} from '@deeepvision/hope-component-kit';
import { computed, ref } from 'vue';

const currentPage = ref(1);

const tableColumns = computed<TableColumn[]>(() => [
  {
    title: 'Name',
    key: 'name',
    customTemplate: true,
  },
  {
    title: 'Address',
    key: 'address',
    customTemplate: true,
  },
  {
    title: 'Date',
    key: 'date',
    customTemplate: true,
  },
]);

const items = [
  {
    date: '2016-05-03',
    name: 'Tom 1',
    address: '189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom 2',
    address: '189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom 3',
    address: '189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom 4',
    address: '189, Grove St, Los Angeles',
  },
];
</script>

Table With Status

You can highlight your table content to distinguish between "success, information, warning, danger" and other states.

Use row-class-name in table to add custom classes to a certain row. Then you can style it with custom classes.

<template>
  <ClientOnly>
    <div>
      <HcDataTable
        :columns="tableColumns"
        :items="items"
        class="table-with-status"
        :auto-actions-column="false"
        :row-class-name="tableRowClassName"
      />
    </div>
  </ClientOnly>
</template>

<script lang="ts" setup>
import { HcDataTable, type TableColumn } from '@deeepvision/hope-component-kit';
import { computed } from 'vue';

const tableColumns = computed<TableColumn[]>(() => [
  {
    title: 'Name',
    key: 'name',
    customTemplate: true,
  },
  {
    title: 'Address',
    key: 'address',
    customTemplate: true,
  },
  {
    title: 'Date',
    key: 'date',
    customTemplate: true,
  },
]);

type RowItem = {
  id: number;
  date: string;
  name: string;
  address: string;
};

const items = [
  {
    id: 1,
    date: '2016-05-03',
    name: 'Tom 1',
    address: '189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-02',
    name: 'Tom 2',
    address: '189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-04',
    name: 'Tom 3',
    address: '189, Grove St, Los Angeles',
  },
  {
    id: 4,
    date: '2016-05-01',
    name: 'Tom 4',
    address: '189, Grove St, Los Angeles',
  },
  {
    id: 5,
    date: '2016-05-01',
    name: 'Tom 5',
    address: '189, Grove St, Los Angeles',
  },
];

const tableRowClassName = ({ row, rowIndex }: {
  row: RowItem;
  rowIndex: number;
}) => {
  console.log(rowIndex, rowIndex % 2 !== 0);
  if (row.id === 1) {
    return 'success-highlight';
  }

  if (row.id === 2) {
    return 'error-highlight';
  }

  if (row.id === 4) {
    return 'warning-highlight';
  }

  return '';
};
</script>

<style lang="postcss">
.table-with-status {
  .success-highlight {
    @apply !bg-success/20;
  }
  .error-highlight {
    @apply !bg-accent2/20;
  }
  .warning-highlight {
    @apply !bg-accent/20;
  }
}

</style>

Types

CellMouseOverEvent:

Option	Type
item	unknown
index	number
indexColumn	number
key	string
event	MouseEvent

TableColumn:

Option	Type
key	string
title	string
sortable	boolean
width	number
bordered	boolean
customTemplate	boolean

Props

Property	Type	Values	Description	Default
items	Array	unknown[]	table data	[]
columns	Array	TableColumn[]	table columns	[]
totalPages	Number	Number	total pages in pagination	0
currentPage	Number	Number	current page of pagination	1
orderBy	String	String	set the sort column and order
loading	Boolean	Boolean	whether data table is loading	false
draggable	Boolean	Boolean	whether table rows are draggable	false
scrollToTop	Boolean	Boolean	whether scroll table to top when table items are changed	true
activeIndex	Number	Number	active table row index
readonly	Boolean	Boolean	whether table is read only	false
resizable	Boolean	Boolean	whether table columns is resizable	false
headerCustomClass	String	String	table header custom class
autoActionsColumn	Boolean	Boolean	whether auto add actions column to table	true
hideHeader	Boolean	Boolean	whether table header hidden	false
search	Boolean	Boolean	whether search mode in table	false
theme	String	defaultwhite	component theme	default
rowClassName	function({ row, rowIndex }) / string	function	function that returns custom class names for a row, or a string assigning class names for every row	-

Slots

Property	Type	Values	Description	Default
custom-render-{column.key}		item - any index - number	customize table cell
custom-header-{column.key}		field - string index - number	customize header cell

Events

Property	Type	Values	Description
position-change	Function	item - any	triggers when change item position (after drag and drop)
edit	Function	item - any	triggers when click on edit button
update:order-by	Function	orderBy - string	triggers when change sort order
update:current-page	Function	page - number	triggers when change pagination page
row-mouse-leave	Function	event - MouseEvent	triggers when mouse leave on row
cell-mouse-over	Function	event - CellMouseOverEvent	triggers when mouse over on cell
cell-mouse-leave	Function	event - MouseEvent	triggers when mouse leave on cell
row-click	Function	item - MouseEvent	triggers when click on row

Table #

Basic Usage #

Draggable Table #

Resizable table columns #

Table With Status #

Types #

Props #

Slots #

Events #