DevExtreme Vue Data Grid (CTP)

Just over a week ago, we wrote about Vue.js for the first time, and today there are some big news: the first public version of our native Data Grid for Vue.js is now available!

Here’s what we have right now

Much of the functionality of our React Data Grid is available right now in the Vue Data Grid. This is the short list:

• Sorting
• Filtering
• Grouping
• Searching
• Paging
• Selection
• Detail Row
• Editing

We have prepared several demos, which you can check out by following this link. Documentation is also available for the feature set of this CTP release, including both guides and the API reference.

If you have already worked with our React Data Grid, you will recognize most of the concepts in the Vue Data Grid. For instance, the structure of the grid setup is based on plugins, and declaration order is important. Of course the syntax and structure is different for Vue, but it’s nevertheless easy to understand what happens:

export default {
  data() {
    return {
      columns: [
        { name: 'orderNo', title: 'Order Number' },
        { name: 'date', title: 'Date' }
      ],
      rows: [
        { orderNo: 1, date: '2018-05-01T12:02:36.839Z' },
        { orderNo: 2, date: '2018-05-02T10:12:24.534Z' }
      ]
      sorting: [
        { columnName: 'orderNo', direction: 'asc' }
      ],
      currentPage: 0,
      pageSize: 10,
      pageSizes: [5, 10, 15]
    };
  },
  template: `
    <dx-grid
      :rows="rows"
      :columns="columns"
    >
      <dx-sorting-state
        :sorting.sync="sorting"
      />
      <dx-integrated-sorting />
      <dx-integrated-paging />
      <dx-table />
      <dx-table-header-row
        showSortingControls
      />
      <dx-paging-panel
        :pageSizes="pageSizes"
      />
    </dx-grid>
  `,
  components: {
    DxSortingState,
    DxPagingState,
    DxIntegratedSorting,
    DxIntegratedPaging,
    DxGrid,
    DxTable,
    DxTableHeaderRow,
    DxPagingPanel
  }
};

Everything is native

Even though the React Data Grid has been the template for the architecture of the Vue Data Grid, our implementation is 100% native to Vue. For example, you can see our use of the .sync modifier in the sample above, which is a Vue-specific shorthand syntax for an event pattern. Our Vue Data Grid is also fully compatible with Vuex (a Flux-style state management implementation for Vue apps) and you can see our Vuex integration demo here.

Some things we don’t have yet

We are working on a set of features beyond this initial CTP release, which should be available soon:

• Virtual Scrolling
• Tree View
• Column Chooser

We also have the following items in our plans, but they are a little further in the future than those above:

• Bands
• Advanced Filtering
• Grouping by Drag&Drop
• Column Resizing and Reordering

As always, you can help us prioritize by giving us feedback!

Try it now!

The CTP version is available now using the version number 1.3.0-beta.1. You can find Getting Started instructions here. All feedback is very much appreciated!

Note that we can’t make promises at this time about a timeline for the release version. It is also very likely that there will be breaking changes to this CTP product, possibly even in minor version releases. We will do our best to document such changes, but they are to be expected at this stage. Of course it is possible, even likely, that the Vue Data Grid or its documentation has bugs in this version. Please feel free to report any issues you find to our GitHub issue tracker.

Free DevExpress Products - Get Your Copy Today