DOCSEARCHbyAlgolia
Submit Docs

vue3-easy-data-table

repository·main·Indexed 20 days ago

https://github.com/hc200ok/vue3-easy-data-table

A customizable and easy-to-use data table component for Vue.js 3.x applications. It supports features such as server-side pagination and sorting via ServerOptions, advanced column filtering with FilterOption, and dynamic CSS class application for headers, rows, and cells. The component is available via npm, yarn, or CDN.

Tokens
3.5K
Snippets
17
Records
17
Agent score
68%

What's inside vue3-easy-data-table

  2. Register vue3-easy-data-table in a Vue 3 application

    main

    After installation, import the component and its required CSS file, then register it globally in your Vue application instance.

    import Vue3EasyDataTable from 'vue3-easy-data-table';
import 'vue3-easy-data-table/dist/style.css';

const app = createApp(App);
app.component('EasyDataTable', Vue3EasyDataTable);

  3. Use vue3-easy-data-table via CDN

    main

    For quick prototyping without a build step, you can include the component via CDN. Ensure you include the CSS, Vue 3, and the component script in the correct order.

    <link href="https://unpkg.com/vue3-easy-data-table/dist/style.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.1/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue3-easy-data-table"></script>

<div id="app">
  <easy-data-table
    :headers="headers"
    :items="items"
  />
</div>

<script>
  const App = {
    components: {
      EasyDataTable: window['vue3-easy-data-table'],
    },
    data () {
      return {
        headers:[
          { text: "Name", value: "name" },
          { text: "Height (cm)", value: "height", sortable: true },
          { text: "Weight (kg)", value: "weight", sortable: true },
          { text: "Age", value: "age", sortable: true }
        ],
        items: [
          { "name": "Curry", "height": 178, "weight": 77, "age": 20 },
          { "name": "James", "height": 180, "weight": 75, "age": 21 },
          { "name": "Jordan", "height": 181, "weight": 73, "age": 22 }
        ],
      }
    },
  };
  Vue.createApp(App).mount('#app');
</script>

  4. Install and use Vue3EasyDataTable

    main

    You can use Vue3EasyDataTable by importing the default export from the package. It is exported as the DataTable component.

    ES Module usage

    Import the component directly into your Vue component:

    import DataTable from 'vue3-easy-data-table';

    CDN usage

    If you are using Vue via a CDN and have a global Vue object available, the component automatically registers itself globally as Vue3EasyDataTable if window.Vue is detected.

  5. Use EasyDataTable component

    main

    The EasyDataTable component requires two main props: :headers (an array of column definitions) and :items (the data array).

    <template>
  <EasyDataTable
    :headers="headers"
    :items="items"
  />
</template>

<script lang="ts">
import type { Header, Item } from "vue3-easy-data-table";

export default defineComponent({
  setup() {
    const headers: Header[] = [
      { text: "Name", value: "name" },
      { text: "Height (cm)", value: "height", sortable: true },
      { text: "Weight (kg)", value: "weight", sortable: true },
      { text: "Age", value: "age", sortable: true }
    ];

    const items: Item[] = [
      { "name": "Curry", "height": 178, "weight": 77, "age": 20 },
      { "name": "James", "height": 180, "weight": 75, "age": 21 },
      { "name": "Jordan", "height": 181, "weight": 73, "age": 22 }
    ];

    return {
      headers,
      items
    };
  },
});
</script>

  6. Define table headers with Header type

    main

    Use the Header type to define the columns of your data table. Each header object specifies the display text, the data field key, and optional properties for sorting, fixing the column, or setting a specific width.

    import { Header } from 'vue3-easy-data-table';

const headers: Header[] = [
  { text: 'Name', value: 'name', sortable: true },
  { text: 'Age', value: 'age', width: 100, fixed: true },
];

  7. Configure column filtering with FilterOption

    main

    The FilterOption type defines how specific fields should be filtered. It supports several comparison modes:

    • between: Requires criteria to be a tuple of two numbers [number, number].
    • = | !=: Requires criteria to be a number or string.
    • > | >= | < | <=: Requires criteria to be a number.
    • in: Requires criteria to be an array of number[] or string[].
    • Custom function: A comparison function (value: any, criteria: string) => boolean can be used with a string criteria.
    export type FilterOption = {
  field: string
  comparison: 'between'
  criteria: [number, number]
} | {
  field: string
  comparison: '=' | '!='
  criteria: number | string
} | {
  field: string
  comparison: '>' | '>=' | '<' | '<='
  criteria: number
} | {
  field: number | string
  comparison: 'in'
  criteria: number[] | string[]
}| {
  field: string
  comparison: (value: any, criteria: string) => boolean
  criteria: string
}

  9. Define data rows with Item type

    main

    The Item type represents a single row of data in the table. It is a generic record where keys are column values and values can be any type.

    import { Item } from 'vue3-easy-data-table';

const items: Item[] = [
  { name: 'John Doe', age: 30, email: 'john@example.com' },
  { name: 'Jane Smith', age: 25, email: 'jane@example.com' },
];

  10. Apply custom CSS classes via callback functions

    main

    You can dynamically apply CSS classes to different parts of the table using these callback types:

    • HeaderItemClassNameFunction: Apply classes to a header based on the Header object and its columnNumber.
    • BodyRowClassNameFunction: Apply classes to an entire row based on the Item data and its rowNumber.
    • BodyItemClassNameFunction: Apply classes to a specific cell based on the column key and rowNumber.
    export type HeaderItemClassNameFunction = (header: Header, columnNumber: number) => string
export type BodyRowClassNameFunction = (item: Item, rowNumber: number) => string
export type BodyItemClassNameFunction = (column: string, rowNumber: number) => string

  11. Handle sort changes with UpdateSortArgument

    main

    The UpdateSortArgument is used to capture changes in the table's sorting state, providing the new sort type and the field being sorted.

    import { UpdateSortArgument } from 'vue3-easy-data-table';

function onSortUpdate(arg: UpdateSortArgument) {
  console.log('Sorted by:', arg.sortBy);
  console.log('Sort type:', arg.sortType);
}

  12. Configure advanced filtering with FilterOption

    main

    The FilterOption type allows you to define complex filtering logic for specific fields. Supported comparison types include:

    • between: Requires a criteria array of two numbers [number, number].
    • =: Exact match with a number or string.
    • !=: Inequality with a number or string.
    • >, >=, <, <=: Comparison operators requiring a number.
    • in: Checks if a value exists within a number[] or string[] array.
    • Custom function: A comparison function with signature (value: any, criteria: string) => boolean.
    import { FilterOption } from 'vue3-easy-data-table';

const filters: FilterOption[] = [
  { field: 'age', comparison: 'between', criteria: [18, 65] },
  { field: 'status', comparison: 'in', criteria: ['active', 'pending'] },
  { field: 'name', comparison: '=', criteria: 'John' }
];