@webitel/ui

Appearance

WtTable ​

Specs ​

Example Table ​

heading 1
heading2
heading 3
value 2
value 3
value 4
value 3
value 2
value 3
value 2
value 3
Code
vue
<script setup>
import { ref } from 'vue';

const headers = [
  {
    text: 'heading 1',
    value: 'name',
    sort: null,
  },
  {
    text: 'heading2',
    value: 'h2',
    sort: null,
  },
  {
    text: 'heading 3',
    value: 'h3',
  },
];

const data = ref([
  {
    id: 'id1',
    h1: 'value 1',
    h2: 'value 2',
    h3: 'value 3',
    _isSelected: true,
  },
  {
    id: 'id2',
    h1: 'value 1',
    h2: 'value 4',
    h3: 'value 3',
    _isSelected: false,
  },
  {
    id: 'id3',
    h1: 'value 1',
    h2: 'value 2',
    h3: 'value 3',
    _isSelected: false,
  },
  {
    id: 'id4',
    h1: 'value 1',
    h2: 'value 2',
    h3: 'value 3',
    _isSelected: false,
  },
]);

const sort = (col, sortValue) => {
  headers.forEach((header) => {
    header.sort = null;
  })
  const column = headers.find((header) => header.value === col.value);
  column.sort = sortValue;
};

const getRowClass = ({id}) => {
  switch (id) {
    case 'id1':
      return 'row-success';
    case 'id2':
      return 'row-warning';
    case 'id3':
      return 'row-error';
    default:
      return '';
  }
}
</script>

<template>
  <wt-table
    :headers="headers"
    :data="data"
    sortable
    grid-actions
    fixed-actions
    resizable-columns
    reorderable-columns
    :row-class="getRowClass"
    @sort="sort"
  >
  </wt-table>
</template>

<style scoped lang="scss"></style>

Table with Vertical Scroll ​

This example demonstrates how to use wt-table with virtual scrolling for large datasets. The table automatically loads more data as you scroll down.

heading 1
heading2
heading 3
Code
vue
<script setup>
import { ref } from 'vue';

let index = ref(4);
const lazy = ref(true)
const loading = ref(false)
const headers = [
  {
    text: 'heading 1',
    value: 'name',
    sort: null,
  },
  {
    text: 'heading2',
    value: 'h2',
    sort: null,
  },
  {
    text: 'heading 3',
    value: 'h3',
  },
];

const data = ref([
  {
    id: 'id1',
    h1: 'value 1',
    h2: 'value 2',
    h3: 'value 3',
    _isSelected: true,
  },
  {
    id: 'id2',
    h1: 'value 1',
    h2: 'value 4',
    h3: 'value 3',
    _isSelected: false,
  },
  {
    id: 'id3',
    h1: 'value 1',
    h2: 'value 2',
    h3: 'value 3',
    _isSelected: false,
  },
  {
    id: 'id4',
    h1: 'value 1',
    h2: 'value 2',
    h3: 'value 3',
    _isSelected: false,
  },
]);

const sort = (col, sortValue) => {
  headers.forEach((header) => {
    header.sort = null;
  })
  const column = headers.find((header) => header.value === col.value);
  column.sort = sortValue;
};

const getRowClass = ({id}) => {
  switch (id) {
    case 'id1':
      return 'row-success';
    case 'id2':
      return 'row-warning';
    case 'id3':
      return 'row-error';
    default:
      return '';
  }
}

const onLoading = () => {
  if (index.value > 50) {
    return;
  }

  setTimeout(() => {
  for (let i = 0; i < 20; i++) {
    data.value.push({
      id: `id${index.value}`,
      h1: 'value 1',
      h2: 'value 2',
      h3: 'value 3',
      _isSelected: true,
    })
    index.value++

  }


  }, 500)
}
</script>

<template>
  <wt-table
    class="table-scroll"
    :headers="headers"
    :data="data"
    :lazy="lazy"
    :on-loading="onLoading"
    :loading="loading"
    sortable
    grid-actions
    fixed-actions
    resizable-columns
    :row-class="getRowClass"
    @sort="sort"
  >
  </wt-table>
</template>

<style scoped lang="scss">
.table-scroll {
  height: 150px;
}
</style>

Table with Vertical Scroll ​

This example demonstrates how to use wt-table with custom headers.

custom header name: heading 1
custom header h2: heading2
heading 3
item id1
value 2
value 3
item id2
value 4
value 3
item id3
value 2
value 3
item id4
value 2
value 3
Code
vue
<script setup>
import { ref } from 'vue';

const headers = [
  {
    text: 'heading 1',
    value: 'name',
    sort: null,
  },
  {
    text: 'heading2',
    value: 'h2',
    sort: null,
  },
  {
    text: 'heading 3',
    value: 'h3',
  },
];

const data = ref([
  {
    id: 'id1',
    h1: 'value 1',
    h2: 'value 2',
    h3: 'value 3',
    _isSelected: true,
  },
  {
    id: 'id2',
    h1: 'value 1',
    h2: 'value 4',
    h3: 'value 3',
    _isSelected: false,
  },
  {
    id: 'id3',
    h1: 'value 1',
    h2: 'value 2',
    h3: 'value 3',
    _isSelected: false,
  },
  {
    id: 'id4',
    h1: 'value 1',
    h2: 'value 2',
    h3: 'value 3',
    _isSelected: false,
  },
]);

const sort = (col, sortValue) => {
  headers.forEach((header) => {
    header.sort = null;
  });
  const column = headers.find((header) => header.value === col.value);
  column.sort = sortValue;
};

const getRowClass = ({ id }) => {
  switch (id) {
    case 'id1':
      return 'row-success';
    case 'id2':
      return 'row-warning';
    case 'id3':
      return 'row-error';
    default:
      return '';
  }
};
</script>

<template>
  <wt-table
    :headers="headers"
    :data="data"
    sortable
    grid-actions
    fixed-actions
    resizable-columns
    reorderable-columns
    :row-class="getRowClass"
    @sort="sort"
  >
    <template #header-name="{ header }">
      custom header name: {{ header.text }}
    </template>
    <template #header-h2="{ header }">
      custom header h2: {{ header.text }}
    </template>
    <template #name="{ item }">
      item {{ item.id }}
    </template>
  </wt-table>
</template>

Key Features of this Example: ​

  • Lazy Loading: Data is loaded in chunks of 20 items as you scroll
  • Virtual Scrolling: Only visible rows are rendered for better performance
  • Dynamic Row Classes: Different rows have different styling based on their data
  • Sorting: Click column headers to sort data
  • Actions: Each row has action buttons (edit/delete)
  • Fixed Height: Table has a fixed height with internal scrolling
  • Loading States: Shows loading indicator during data fetch

How it Works: ​

  1. Initial Load: Starts with 4 items
  2. Scroll Detection: When you scroll near the bottom, onLoading is triggered
  3. Data Fetch: Simulates API call with 500ms delay
  4. Append Data: Adds 20 new items to the existing data
  5. Stop Condition: Stops loading after 50 items total

Virtual Scrolling Usage: ​

vue
<template>
  <wt-table
    :headers="headers"
    :data="data"
    :lazy="true"
    :loading="loading"
    :on-loading="handleLazyLoad"
    scrollable
    scroll-height="150px"
    sortable
    grid-actions
    fixed-actions
    resizable-columns
    :row-class="getRowClass"
    @sort="handleSort"
  />
</template>

<script setup>
import { ref } from 'vue';

const data = ref([]);
const loading = ref(false);
const lazy = ref(true);

const handleLazyLoad = () => {
  if (loading.value) return;

  loading.value = true;

  // Simulate API call
  setTimeout(() => {
    // Add new data
    for (let i = 0; i < 20; i++) {
      data.value.push({
        id: `id${index.value}`,
        name: 'New Item',
        // ... other properties
      });
    }

    loading.value = false;
  }, 500);
};
</script>