datatables.net-vue3
    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 DataTables.net to be used inside a Vue application.

    To install:

    npm install --save datatables.net-vue
    

    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 'datatables.net-vue'

    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.

    Templates

    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">
    	<thead>
    		<tr>
    			<th>A</th>
    			<th>B</th>
    		</tr>
    	</thead>
    </DataTable>

    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.

    Extensions

    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 'datatables.net-vue'
    import Select from 'datatables.net-select';
    
    DataTable.use(Select);

    Styling

    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 datatables.net-bs5
    npm install datatables.net-select-bs5
    

    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 'datatables.net-dt';
    @import 'datatables.net-select-dt';

    Keywords

    none

    Install

    npm i datatables.net-vue3

    DownloadsWeekly Downloads

    35

    Version

    1.0.0

    License

    none

    Unpacked Size

    1.68 MB

    Total Files

    9

    Last publish

    Collaborators

    • datatables