Skip to main content

print

Description​

Fires when printing the table

Usage​

"print": ({
    mode?: "landscape"|"portrait",
    paper?: "a3", "a4", "letter",
    ppi?: number, 
});

Parameters​

The callback of the action takes an object with the following parameters:

  • mode - (optional) print mode that can be "landscape" or "portrait"
  • paper - (optional) paper size and format that can be "a3", "a4", "letter"
  • ppi - (optional) resolution in pixels of a table; 100 is set by default

Example​

<script setup>
    import { Button } from "@svar-ui/vue-core"; // import the Button component
    import { Grid } from "@svar-ui/vue-grid";
    import { getData } from "../data";

    const { data, columns } = getData();
    
    const api = ref(null);
    
    function printGrid() {
        api.value.exec("print");
    }
</script>

<template>
    <Button :onclick="() => printGrid()" type="primary">Print Grid</Button>

    <div style="height: 400px; margin-top: 10px;">
        <Grid
            ref="api"
            :data="data"
            :columns="columns"
        />
    </div>
</template>

Related samples:

Related articles: