A flat table is a simple way to show the initial data on a plain grid in your Vue project.
<template>
<Pivot
componentFolder="https://cdn.flexmonster.com/"
height="370"
v-bind:report="report"
/>
</template>
<script>
import Pivot from "vue-flexmonster/vue3";
import "flexmonster/flexmonster.css";
export default {
name: "PivotComponent",
components: {
Pivot,
},
data() {
return {
report: {
dataSource: {
type: "csv",
filename: "https://cdn.flexmonster.com/data/data.csv",
},
options: {
grid: {
type: "flat",
},
},
slice: {
measures: [
{
uniqueName: "Country",
},
{
uniqueName: "Category",
},
{
uniqueName: "Color",
},
{
uniqueName: "Price",
},
{
uniqueName: "Discount",
},
],
},
formats: [
{
name: "",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 2,
currencySymbol: "$",
},
],
},
};
},
};
</script>
In flat format, your data is shown row-by-row. This is a non-hierarchical grid view, where your data is represented the same way as the records from your data source.
Using the Field List, you can decide which columns to show and how to order them. You can also filter, sort, enable grand totals, and show them at the top or bottom row of the table.
Plus, with Ctrl + click (Command + click on macOS), you can use multi-column sorting to sort the records by multiple fields.
Toggle between the layouts: flat, classic (tabular), or compact to find the best way to interpret data.