Export

Export allows you to export table data into CSV format.

TIP

By default, export option is disabled.

Enabling / disabling export

To enable / disable data export, simply set the enableExport option to either true or false (default):

vue

<template>
  <ModernTable
    :columns="[
      { label: 'Country', field: 'country' },
      { label: 'Capital', field: 'capital' },
      { label: 'Population', field: 'population' }
    ]"
    :rows="[
      { country: 'Ukraine', capital: 'Kiev', population: '3M' },
      { country: 'France', capital: 'Paris', population: '2M' },
      { country: 'Germany', capital: 'Berlin', population: '4M' }
    ]"
    :options="{ enableExport: true }" 
  />
</template>

Country	Capital	Population
Ukraine	Kiev	3M
France	Paris	2M
Germany	Berlin	4M
1 - 3 / 3

TIP

If sorting and/or filtering are used, they will also be applied in the export.

TIP

By default, every columns are included.

Disabling export on specific columns

Use the noExport option to disable export on specific columns:

vue

<template>
  <ModernTable
    :columns="[
      { label: 'Country (no export)', field: 'country', noExport: true }, 
      { label: 'Capital', field: 'capital' },
      { label: 'Population', field: 'population' }
    ]"
    :rows="[
      { country: 'Ukraine', capital: 'Kiev', population: '3M' },
      { country: 'France', capital: 'Paris', population: '2M' },
      { country: 'Germany', capital: 'Berlin', population: '4M' }
    ]"
    :options="{ enableExport: true }"
  />
</template>

Country (no export)	Capital	Population
Ukraine	Kiev	3M
France	Paris	2M
Germany	Berlin	4M
1 - 3 / 3

Export ​

Enabling / disabling export ​

Disabling export on specific columns ​

Export

Enabling / disabling export

Disabling export on specific columns