Appearance

Table ​

The FTTable component replaces the standard html button with a design theme and a multitude of options.

Usage ​

Buttons in their simplest form contain uppercase text, a slight elevation, hover effect, and a ripple effect on click.

Composition api (script setup) ​

vue
<script setup lang="ts">
  import { FTTable } from '@fasttrack-solutions/vue-components-lib';
</script>
<script setup lang="ts">
  import { FTTable } from '@fasttrack-solutions/vue-components-lib';
</script>

Options api ​

vue
<script>
  import { FTButton } from '@fasttrack-solutions/vue-components-lib';
  export default {
    components: {
      FTTable
    }
  }
</script>
<script>
  import { FTButton } from '@fasttrack-solutions/vue-components-lib';
  export default {
    components: {
      FTTable
    }
  }
</script>

Simple Headers ​

Buttons in their simplest form contain uppercase text, a slight elevation, hover effect, and a ripple effect on click.

TestTest2
0Row 0
1Row 1
2Row 2
3Row 3
vue
<script lang="ts" setup>
  const headsSimple = ['Test', 'Test2'];
  const tableItems = ref([]);

  for (let i = 0; i < 4; i += 1) {
    tableItems.value.push({
      id: i,
      name: `Row ${i}`,
    });
  }
</script>

<FTTable :heads="headsSimple" :items="tableItems"></FTTable>
<script lang="ts" setup>
  const headsSimple = ['Test', 'Test2'];
  const tableItems = ref([]);

  for (let i = 0; i < 4; i += 1) {
    tableItems.value.push({
      id: i,
      name: `Row ${i}`,
    });
  }
</script>

<FTTable :heads="headsSimple" :items="tableItems"></FTTable>

Advanced Headers ​

You can pass a list of objects to heads to enable things like sorting

TestTest 2
0Row 0
1Row 1
2Row 2
3Row 3
vue
<script lang="ts" setup>
  const headsAdvanced = [
    { label: 'Test', sortable: true, sortKey: 'id' },
    {
      label: 'Test 2',
      sortable: true,
      sortKey: 'name',
      class: 'column--2',
    },
  ];
  const tableItems = ref([]);

  for (let i = 0; i < 4; i += 1) {
    tableItems.value.push({
      id: i,
      name: `Row ${i}`,
    });
  }
</script>

<FTTable :heads="headsAdvanced" :items="tableItems"></FTTable>
<script lang="ts" setup>
  const headsAdvanced = [
    { label: 'Test', sortable: true, sortKey: 'id' },
    {
      label: 'Test 2',
      sortable: true,
      sortKey: 'name',
      class: 'column--2',
    },
  ];
  const tableItems = ref([]);

  for (let i = 0; i < 4; i += 1) {
    tableItems.value.push({
      id: i,
      name: `Row ${i}`,
    });
  }
</script>

<FTTable :heads="headsAdvanced" :items="tableItems"></FTTable>

Custom headers ​

Buttons in their simplest form contain uppercase text, a slight elevation, hover effect, and a ripple effect on click.

TestTest2
0 This is Row 0
1 This is Row 1
2 This is Row 2
3 This is Row 3
vue
<script lang="ts" setup>
  import { FTCheckbox } from '@fasttrack-solutions/vue-components-lib';
  
  const headsSimple = ['Test', 'Test2'];
  const tableItems = ref([]);

  for (let i = 0; i < 4; i += 1) {
    tableItems.value.push({
      id: i,
      name: `Row ${i}`,
    });
  }
</script>

<FTTable :items="tableItems">
  <template #head>
    <th><FTCheckbox></FTCheckbox></th>
    <th v-for="head in headsSimple">
      {{head}}
    </th>
  </template>
  <template #row="item">
    <tr class="tr--clickable" @click="clickRow(item)">
      <td>
        <FTCheckbox></FTCheckbox>
      </td>
      <td>
        {{ item.id }}
      </td>
      <td>
        This is {{ item.name }}
      </td>
    </tr>
  </template>
</FTTable>
<script lang="ts" setup>
  import { FTCheckbox } from '@fasttrack-solutions/vue-components-lib';
  
  const headsSimple = ['Test', 'Test2'];
  const tableItems = ref([]);

  for (let i = 0; i < 4; i += 1) {
    tableItems.value.push({
      id: i,
      name: `Row ${i}`,
    });
  }
</script>

<FTTable :items="tableItems">
  <template #head>
    <th><FTCheckbox></FTCheckbox></th>
    <th v-for="head in headsSimple">
      {{head}}
    </th>
  </template>
  <template #row="item">
    <tr class="tr--clickable" @click="clickRow(item)">
      <td>
        <FTCheckbox></FTCheckbox>
      </td>
      <td>
        {{ item.id }}
      </td>
      <td>
        This is {{ item.name }}
      </td>
    </tr>
  </template>
</FTTable>

Custom rows ​

Buttons in their simplest form contain uppercase text, a slight elevation, hover effect, and a ripple effect on click.

TestTest2
0 This is Row 0
1 This is Row 1
2 This is Row 2
3 This is Row 3
vue
<script lang="ts" setup>
  const headsSimple = ['Test', 'Test2'];
  const tableItems = ref([]);

  for (let i = 0; i < 4; i += 1) {
    tableItems.value.push({
      id: i,
      name: `Row ${i}`,
    });
  }
</script>

<FTTable :heads="headsSimple" :items="tableItems">
  <template #row="item">
    <tr class="tr--clickable" @click="clickRow(item)">
      <td>
        {{ item.id }}
      </td>
      <td>
        This is {{ item.name }}
      </td>
    </tr>
  </template>
</FTTable>
<script lang="ts" setup>
  const headsSimple = ['Test', 'Test2'];
  const tableItems = ref([]);

  for (let i = 0; i < 4; i += 1) {
    tableItems.value.push({
      id: i,
      name: `Row ${i}`,
    });
  }
</script>

<FTTable :heads="headsSimple" :items="tableItems">
  <template #row="item">
    <tr class="tr--clickable" @click="clickRow(item)">
      <td>
        {{ item.id }}
      </td>
      <td>
        This is {{ item.name }}
      </td>
    </tr>
  </template>
</FTTable>

No striped rows ​

Make every row the same color

TestTest2
0Row 0
1Row 1
2Row 2
3Row 3
vue
<script lang="ts" setup>
  const headsSimple = ['Test', 'Test2'];
  const tableItems = ref([]);

  for (let i = 0; i < 4; i += 1) {
    tableItems.value.push({
      id: i,
      name: `Row ${i}`,
    });
  }
</script>

<FTTable :heads="headsSimple" :items="tableItems" no-stripes></FTTable>
<script lang="ts" setup>
  const headsSimple = ['Test', 'Test2'];
  const tableItems = ref([]);

  for (let i = 0; i < 4; i += 1) {
    tableItems.value.push({
      id: i,
      name: `Row ${i}`,
    });
  }
</script>

<FTTable :heads="headsSimple" :items="tableItems" no-stripes></FTTable>

With paging ​

TestTest2
0Row 0
1Row 1
2Row 2
3Row 3
4Row 4
1-550
5 items per page
  • 1
  • 2
  • 3
  • 10
  • Go to
vue
<script lang="ts" setup>
  const headsSimple = ['Test', 'Test2'];
  const tableItems = ref([]);

  for (let i = 0; i < 50; i += 1) {
    tableItems.value.push({
      id: i,
      name: `Row ${i}`,
    });
  }
</script>

<FTTable :heads="headsSimple" :items="tableItems" with-paging :default-page-size="5"></FTTable>
<script lang="ts" setup>
  const headsSimple = ['Test', 'Test2'];
  const tableItems = ref([]);

  for (let i = 0; i < 50; i += 1) {
    tableItems.value.push({
      id: i,
      name: `Row ${i}`,
    });
  }
</script>

<FTTable :heads="headsSimple" :items="tableItems" with-paging :default-page-size="5"></FTTable>

Props ​

In addition to the standard attributes supported but HTML button FTButton accepts custom helper props

NameDefaultDescription
withPagingfalseWhether to display pagination
noStripesfalseDisable zebra striped rows
heads[]Table head items
items[]Table rows

FTPaging contains all the information regarding the pagination

NameDefaultDescription
defaultPageSize25Number of items to show per page
showFirstPagefalseShow a go to first page in paginator
showLastPagefalseShow a go to last page in paginator
storeSortKeyemptyIf set will set an item in localStorage to remember sortKer and sortOrder
defaultSortKeyemptyDefault key to sort on
defaultSortOrderdescDefault order for sorting

CSS ​

Most of the default styles are setup using CSS variables for easy customization on a per project basis.

CSS variableDefault Value
--ft-table-row-padding12px 10px
--ft-table-row-background--hover#eceff1
--ft-table-row-background-odd-line#f9f9f9
--ft-table-head-border2px solid #f5f5f5

Copyright © Fast Track Solutions