vuetable-2

data table simplify! -- datatable component for Vue 2.x. See documentation at

2,156

400

2,156

372

View on GitHub View on NPM

Top Related Projects

vue-good-table

2,159

An easy to use powerful data table for vuejs with advanced customizations including sorting, column filtering, pagination, grouping etc

vue-easytable

3,672

A powerful data table based on vuejs. You can use it as data grid、Microsoft Excel or Google sheets. It supports virtual scroll、cell edit etc.

Quick Overview

Vuetable-2 is a data table component for Vue.js 2.x. It provides a flexible and feature-rich solution for displaying and interacting with tabular data in Vue applications. The library offers sorting, pagination, and custom field rendering capabilities out of the box.

Pros

Easy integration with Vue.js projects
Highly customizable with various props and events
Supports server-side data processing for large datasets
Responsive design for mobile compatibility

Cons

Limited documentation and examples for advanced use cases
Some users report performance issues with large datasets
Not actively maintained (last update was in 2019)
Lacks built-in support for modern Vue 3 composition API

Code Examples

Basic usage with local data:

<template>
  <vuetable
    :fields="fields"
    :data="tableData"
  ></vuetable>
</template>

<script>
import { Vuetable } from 'vuetable-2';

export default {
  components: { Vuetable },
  data() {
    return {
      fields: ['name', 'email', 'age'],
      tableData: [
        { name: 'John Doe', email: 'john@example.com', age: 30 },
        { name: 'Jane Smith', email: 'jane@example.com', age: 25 },
      ],
    };
  },
};
</script>

Using custom field component:

<template>
  <vuetable :fields="fields" :data="tableData">
    <template #name="props">
      <div class="custom-name">{{ props.rowData.name }}</div>
    </template>
  </vuetable>
</template>

<script>
import { Vuetable } from 'vuetable-2';

export default {
  components: { Vuetable },
  data() {
    return {
      fields: [
        { name: 'name', title: 'Name' },
        'email',
        'age',
      ],
      tableData: [/* ... */],
    };
  },
};
</script>

Server-side pagination:

<template>
  <vuetable
    :api-url="apiUrl"
    :fields="fields"
    :pagination-path="'pagination'"
    @vuetable:pagination-data="onPaginationData"
  ></vuetable>
</template>

<script>
import { Vuetable } from 'vuetable-2';

export default {
  components: { Vuetable },
  data() {
    return {
      apiUrl: 'https://api.example.com/users',
      fields: ['name', 'email', 'age'],
    };
  },
  methods: {
    onPaginationData(paginationData) {
      this.$refs.pagination.setPaginationData(paginationData);
    },
  },
};
</script>

Getting Started

Install the package:
```
npm install vuetable-2
```

Import and use the component in your Vue file:

<template>
  <vuetable
    :fields="fields"
    :data="tableData"
  ></vuetable>
</template>

<script>
import { Vuetable } from 'vuetable-2';

export default {
  components: { Vuetable },
  data() {
    return {
      fields: ['name', 'email', 'age'],
      tableData: [/* Your data array */],
    };
  },
};
</script>

Customize the table by adding props, events, and slots as needed.

Competitor Comparisons

vue-tables-2

1,527

Vue.js 2 grid components

Pros of vue-tables-2

More comprehensive documentation and examples
Built-in support for server-side operations
Offers both a component-based and a plugin-based implementation

Cons of vue-tables-2

Steeper learning curve due to more complex API
Less flexibility in customizing table appearance

Code Comparison

vuetable-2:

<vuetable ref="vuetable"
  :api-url="apiUrl"
  :fields="fields"
  :sort-order="sortOrder"
  @vuetable:pagination-data="onPaginationData"
></vuetable>

vue-tables-2:

<v-client-table :data="tableData" :columns="columns" :options="options">
  <template slot="actions" slot-scope="props">
    <button @click="editRow(props.row)">Edit</button>
  </template>
</v-client-table>

Both libraries provide Vue.js components for creating data tables, but they differ in their approach and feature set. vuetable-2 focuses on simplicity and ease of use, while vue-tables-2 offers more advanced features and configuration options. The code comparison shows that vuetable-2 uses a single component with props, while vue-tables-2 allows for more customization through slots and options.

vue-good-table

2,159

An easy to use powerful data table for vuejs with advanced customizations including sorting, column filtering, pagination, grouping etc

Pros of vue-good-table

More comprehensive documentation and examples
Built-in support for advanced features like column filtering and custom styling
Active development with frequent updates and bug fixes

Cons of vue-good-table

Larger bundle size due to additional features
Steeper learning curve for basic implementations
Less flexibility for custom row templates

Code Comparison

vuetable-2:

<vuetable
  :api-url="apiUrl"
  :fields="fields"
  :pagination-path="paginationPath"
  @vuetable:pagination-data="onPaginationData"
></vuetable>

vue-good-table:

<vue-good-table
  :columns="columns"
  :rows="rows"
  :pagination-options="{
    enabled: true,
    perPage: 10
  }"
></vue-good-table>

Both libraries offer similar basic functionality, but vue-good-table provides more built-in options for pagination and other features out of the box. vuetable-2 requires more manual configuration for advanced features but offers greater flexibility in terms of customization.

vue-easytable

3,672

A powerful data table based on vuejs. You can use it as data grid、Microsoft Excel or Google sheets. It supports virtual scroll、cell edit etc.

Pros of vue-easytable

More comprehensive feature set, including virtual scrolling and cell editing
Better documentation and examples
Active development with frequent updates

Cons of vue-easytable

Steeper learning curve due to more complex API
Larger bundle size, which may impact performance for simpler use cases

Code Comparison

vuetable-2:

<vuetable
  :api-url="apiUrl"
  :fields="fields"
  :pagination-path="paginationPath"
  @vuetable:pagination-data="onPaginationData"
></vuetable>

vue-easytable:

<ve-table
  :columns="columns"
  :table-data="tableData"
  :border-around="true"
  :border-x="true"
  :border-y="true"
></ve-table>

Both libraries offer declarative table components, but vue-easytable provides more built-in styling options and configuration directly in the component. vuetable-2 focuses on API integration, while vue-easytable emphasizes local data management and customization.

vue-easytable offers a more feature-rich solution with advanced capabilities, making it suitable for complex table requirements. However, this comes at the cost of a steeper learning curve and potentially larger bundle size. vuetable-2, on the other hand, provides a simpler API that may be easier to implement for basic table needs, especially when working with server-side data.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Vuetable-2 - data table simplify!

Vuetable-2 v2.0-beta is available now!

See the next branch.

Vuetable-2 works with Vue 2.x, vuetable is for Vue 1.x

If you're looking for the version that's working with Vue 1.x, please go to vuetable repo.

Documentation and Tutorial

Documentation is still under development, but you can view it at https://ratiw.github.io/vuetable-2. Thanks to @cristijora for the help.

Meanwhile, check out

the Tutorial with follow-along project here. It should be enough to get you started.
Sample project using Vuetable-2 with Laravel 5.4 and Laravel-Mix

If you've been using Vuetable for Vue 1.x before, checkout what's changed for info on changes from Vuetable for Vue 1.x and the upgrade guide on how you could upgrade from Vuetable for Vue 1.x.

You can now make use of Vue's scoped slot using the new __slot special field, thanks to @sjmarve. That means you are able to define action buttons per instance of a data table without depending on a globally defined component.

Use scoped slot in parent when defining the actions Vue Doc for scopped Slots

e.g.

<template slot="actions" scope="props">
    <div class="table-button-container">
        <button class="btn btn-default" @click="onClick('edit-item', props.rowData)"><i class="fa fa-edit"></i> View</button>&nbsp;&nbsp;
        <button class="btn btn-danger" @click="onClick('delete-item', props.rowData)"><i class="fa fa-remove"></i> Edit</button>&nbsp;&nbsp;
    </div>
</template>

the onClick function can now be defined in the parent and the parent has Access to rowData and rowIndex via props. :)

The original functionality still works

Breaking Changes

v1.6.0

The icons prop of VuetablePagination is now moved into the css prop object. See this codepen.

Example Code

Clone the project
Go into the cloned directory
npm install
npm run dev
Open browser to http://localhost:8080

Usage

NPM

npm install vuetable-2 --save-dev

Javascript via CDN

Thanks to @cristijora for providing helps on this.

// vuetable-2 dependencies
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.min.js"></script>
// vuetable-2
<script src="https://unpkg.com/vuetable-2@1.6.0"></script>
Vue.use(Vuetable)

This is demonstrated in this jsfiddle.

The .use from above will register all the components globally.

function install(Vue){
  Vue.component("vuetable", Vuetable);
  Vue.component("vuetable-pagination", VueTablePagination);
  Vue.component("vuetable-pagination-dropdown", VueTablePaginationDropDown);
  Vue.component("vuetable-pagination-info", VueTablePaginationInfo);
}

Also you have the ability to access certain components if you need them:

VueTable: VueTable.default/VueTable.VueTable,
VueTablePagination: VueTable.VueTablePagination,
VueTablePaginationInfo: VueTable.VueTablePaginationInfo,
VueTablePaginationDropdown: VueTable.VueTablePaginationDropdown

Contributions

Any contribution to the code (via pull request would be nice) or any part of the documentation and any idea and/or suggestion are very welcome.

Note For any bug fix, the PR should be forked from the master branch. And for any suggestion or additional feature, the PR should be forked from the develop branch, where it can be integrated and rolled out in the next release.

If you are not sure, please ask by openning a new issue.

However, please do not feel bad if your pull requests or contributions do not get merged or implemented into Vuetable.

Your contributions can, not only help make Vuetable better, but also push it away from what I intend to use it for. I just hope that you find it useful for your use or learn something useful from its source code. But remember, you can always fork it to make it work the way you want.

License

Vuetable is open-sourced software licensed under the MIT license.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of vue-tables-2

Cons of vue-tables-2

Code Comparison

Pros of vue-good-table

Cons of vue-good-table

Code Comparison

Pros of vue-easytable

Cons of vue-easytable

Code Comparison

Convert designs to code with AI

README

Vuetable-2 - data table simplify!

Vuetable-2 v2.0-beta is available now!

Vuetable-2 works with Vue 2.x, vuetable is for Vue 1.x

Documentation and Tutorial

Breaking Changes

v1.6.0

Example Code

Usage

NPM

Javascript via CDN

Contributions

License

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days