We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.
List of all demos

Vue Pivot Table: flat view

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: "data/data.csv",
            },
            options: {
              grid: {
                type: "flat",
              },
            },
            slice: {
              columns: [
                {
                  uniqueName: "Country",
                },
                {
                  uniqueName: "Category",
                },
                {
                  uniqueName: "Color",
                },
                {
                  uniqueName: "Price",
                },
                {
                  uniqueName: "Discount",
                },
              ],
            },
            formats: [
              {
                name: "",
                thousandsSeparator: ",",
                decimalSeparator: ".",
                decimalPlaces: 2,
                currencySymbol: "$",
              },
            ],
          },
        };
      },
    };
    </script>
    

    In flat format, your CSV and JSON data are shown row-by-row. It's a non-hierarchical grid view where your data is represented the same way as the records come from your data source.

    Using the Field List you can set which columns to show and how to order them. You can also filter, sort, enable grand totals of the measures and show them at the top row of the table.

    Plus, with Ctrl + click you can use multi-column sorting and sort the records by multiple fields.

    Toggle between the layouts: flat, classic (tabular) or compact, to find the the best way how to interpret data.