Migrating from UITable to HighRise DataTable

This guide will help you migrate from the ghl-ui Table component to the new HighRise DataTable component.

Component Implementation Changes

Import Changes

- import { UITable } from '@gohighlevel/ghl-ui'
+ import { HLDataTable,HLDataTableWrapper } from '@platform-ui/highrise'

Breaking Changes

The following architectural changes have been made:

1. columns prop:

   Old	New	Description
   key	id, accessorKey	for column uniqueness
   title	header	column header
   render	cellFormatter	cell formatter function, row is the row data.

2. data prop remains the same

3. enableTextSearch prop:

   Old	New	Description
   enableTextSearch	:show-header="true" :show-global-search="true"	if enableTextSearch prop is true or prop is not provided

4. checkedRowKeys prop:

   Old	New	Description
   checkedRowKeys	selectedRows	selected rows array

5. @update:searchText event:

   Old	New	Description
   @update:searchText	@update:global-filter	global filter event

6. #pagination slot:

   • Old: Used #pagination slot
   • New: Uses #footer slot with HLPagination component in HLDataTableWrapper with footer slot

7. empty slot:

   • Old: Used empty slot
   • New: Uses no-data slot with HLEmpty component inside HLDataTable

Examples

Basic DataTable Types

- const columns = [
-  {
-    key: 'name',
-    title: 'Name',
-    render: (row) => row.name,
-  },
-  {
-    key: 'email',
-    title: h('span', { class: 'text-gray-500' }, 'Email'),
-    render: (row) => row.email,
-  },
- ]

+ const tableInstance = ref(null)

+ const columns = [
+  {
+    id: 'name',
+    header: 'Name',
+    accessorKey: 'name', // this is required for the table to work, key is now accessorKey
+    cellFormatter: (rowData) => rowData.row.original.name,
+  },
+  {
+    id: 'email',
+    header: () => h('span', { class: 'text-gray-500' }, 'Email'),
+    accessorKey: 'email', // this is required for the table to work, key is now accessorKey
+    cellFormatter: (rowData) => rowData.row.original.email,
+  },
+ ]

- <UITable :columns="columns" :data="data" />
+ <HLDataTableWrapper :responsive-column-width="true" max-width="100%">
+    <HLDataTable ref="tableInstance" :columns="columns" :data="data" row-height="auto" />
+  </HLDataTableWrapper>

INFO

• in columns prop, title is just replaced with header , there is no other change, if there is h() function then map it like ()=>h()
• render is replaced with cellFormatter and param is rowData which is an object and should mapped rowData.row.original

With enableTextSearch

- <UITable :columns="columns" :data="data" :enableTextSearch="true" @update:searchText="updateSearchText" />
+ <HLDataTableWrapper :show-header="true" :show-global-search="true" @update:global-filter="updateSearchText" :responsive-column-width="true" max-width="100%">
+    <HLDataTable ref="tableInstance" :columns="columns" :data="data" row-height="auto" />
+  </HLDataTableWrapper>

With Pagination

- <UITable :columns="columns" :data="data" :showSizePicker="true" :pageSizes="[10, 20, 30, 40]" :pageSize="10" :pageSlot="9" />
+ <HLDataTableWrapper :show-header="true" :show-global-search="true" @update:global-filter="updateSearchText" :responsive-column-width="true" max-width="100%">
+    <template #footer>
+      <HLPagination :show-per-page-drop-down="true" :per-page-dropdown-options="[{key: 10, label: '10'}, {key: 20, label: '20'}, {key: 30, label: '30'}, {key: 40, label: '40'}]"
+        :item-count="tableInstance.table?.getFilteredRowModel().rows.length"
+        :per-page="tableInstance.table?.getState().pagination.pageSize"
+        :show-current-range="false"
+        :current-page="tableInstance.table?.getState().pagination.pageIndex + 1"
+        @update:per-page="tableInstance.table?.setPageSize"
+        @update:page="page => {tableInstance.table?.setPageIndex(page - 1)}"
+      />
+    </template>
+    <HLDataTable ref="tableInstance"  :columns="columns" :data="data" row-height="auto" />
+  </HLDataTableWrapper>

WARNING

• Always add header slot for HLDataTableWrapper and HLPagination component should be inside footer slot for HLDataTableWrapper
• HLPagination component should be inside footer slot for HLDataTableWrapper

With Empty slot

- <UITable :columns="columns" :data="data">
-  <template #empty>
-    <UIEmpty />
-  </template>
- </UITable>

+ <HLDataTableWrapper :responsive-column-width="true" max-width="100%">
+    <HLDataTable ref="tableInstance" :columns="columns" :data="data" row-height="auto">
+      <template #no-data>
+        <HLEmpty />
+      </template>
+    </HLDataTable>
+ </HLDataTableWrapper>

INFO

• empty slot is replaced with no-data slot
• HLEmpty component is used to show the empty state inside HLDataTable