Flexmonster MCP Server is here! Connect your ✨AI assistant to our documentation. Get started
+

React Pivot Table: Flat view

A flat table is a form of Flexmonster Pivot that displays raw data in an Excel-like data grid view.


    import * as FlexmonsterReact from "react-flexmonster";
    import "flexmonster/flexmonster.css";
    
    function PivotTableDemo() {
      const 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: "$"
          }
        ]
      };
    
      return (
        <>
          <FlexmonsterReact.Pivot
           report={report}
          />
        </>
      );
    }
    
    export default PivotTableDemo;
    

    This neat non-hierarchical React grid view lets end-users show their data in a way it comes from the data source — non-aggregated values, row-by-row.

    Though the way of displaying data is different, the features of the flat grid are the same as for other layouts. Via the Field List, an end-user can define a slice and configurations, order, filter, and sort data. It is also possible to show grand totals and put them at the top or bottom row of the table.

    Multi-column sorting makes this form distinct from others: use Ctrl + click (Command + click on macOS) to sort the records by multiple fields.

    To quickly change the view angle of your report, you can switch to the classic (tabular) or compact forms.

    Frequently asked questions

    Can't find your answer here?
    Visit the FAQ page

    Flexmonster Pivot Table & Charts is a JavaScript pivot table component for adding interactive reporting and data analysis to web applications. Users can summarize, filter, sort, and explore data in pivot tables and charts, drill into results, and export reports.