vue2-sticky-table v0.3.2

vue2-sticky-table

Vue's table component with vertical and horizontal scrolling, horizontal resizing, and sticky functions.

Features

This library does not implement sorting, pagination, or other item manipulation features, but focuses on table basic features.

• Fixing the table header
• Fixing the table footer
• Fixing of any column
• Resizing of any column
• Horizontal and vertical scrolling

Installation

yarn add vue-sticky-table

Usage

Options

Example

import VueStickyTable from 'vue-sticky-table';

export default {
  name: 'App',
  components: {
    VueStickyTable,
  },
  data() {
    return {
      options: [
        // First column options.
        {
          nth: 1,
          fixed: true,
          resizable: true,
          width: 120,
        },
        // Third column options.
        {
          nth: 3,
          resizable: true,
        },
      ],
      // [{guid,name,phone,email,date,address}...]
      items: []
    };
  },
  methods: {
    resize(value) {
      // You can receive the width and offset values of
      // all header columns in the resize event.
      console.debug(value);
    },
  },
};

<vue-sticky-table
  :fps="45" :width="600" :height="400"
  :column-options="options" :default-column-width="150"
  @resize="resize">
  <template #thead>
    <tr>
      <th>Guid</th>
      <th>Name</th>
      <th>Phone</th>
      <th>Email</th>
      <th>Date of Birth</th>
      <th>Address</th>
    </tr>
  </template>
  <template #tbody>
    <tr v-for="item in items"
        :key="item.guid">
      <td>{{ item.guid }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.phone }}</td>
      <td>{{ item.email }}</td>
      <td>{{ item.date }}</td>
      <td>{{ item.address }}</td>
    </tr>
  </template>
  <template #tfoot>
    <tr>
      <th>Guid</th>
      <th>Name</th>
      <th>Phone</th>
      <th>Email</th>
      <th>Date of Birth</th>
      <th>Address</th>
    </tr>
  </template>
</vue-sticky-table>

License

MIT