TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    DataTables component for Vue 3

    This library provides a Vue 3 component for to be used inside a Vue application.

    To install:

    npm install --save

    This will automatically install DataTables as a dependency. Other DataTables extensions can also be installed in your application - see below.

    In your Vue component you can then:

    import DataTable from ''

    Which makes a DataTable component available. It provides the following parameters:

    • columns - Define the columns array used for DataTables initialisation
    • data - Data array for DataTables. This is optional and if you are using Ajax to load the DataTable data is not required.
    • ajax - Ajax option for DataTables - to load data for the table over Ajax.
    • class - Class name to assign to the table tag
    • options - The DataTables options for the table. Note that this can include columns, data and ajax - if they are provided by one of the properties from above that will override a matching option given here.


    The DataTable component provides a single slot that can be used to define the HTML for the table structure - i.e. the thead and tfoot:

    <DataTable :data="[[1,2], [3,4]]" class="display">

    IMPORTANT You should not use a Vue for in the template to display the HTML for the table body! Doing so will cause a conflict between DataTables and Vue both trying to control the same DOM elements. Allow DataTables to build the HTML for the rows.


    DataTables provides a wide range of extensions that singificantly expands its abilities. Extensions can be imported from npm and then registered with DataTables through it's use() method - e.g.:

    import DataTable from ''
    import Select from '';


    The Vue component for DataTables doesn't include any styling by default. We provide support for a number of different styling libraries, and you will need to install those that you require and for any additional extensions you require.

    For example, to use Bootstrap 5 styling, you would install the -bs5 packages for DataTables:

    npm install
    npm install

    And in your Vue application's CSS (assuming your are using Vite or some other builder which can resolve the style property for npm packages):

    @import '';
    @import '';




    npm i

    DownloadsWeekly Downloads






    Unpacked Size

    1.68 MB

    Total Files


    Last publish


    • datatables