A flat table is a form of Flexmonster Pivot that displays raw data in an Excel-like data grid view.
import React from "react";
import * as FlexmonsterReact from "react-flexmonster";
class PivotTableDemo extends React.Component {
render() {
return (
<>
<div className="App">
<FlexmonsterReact.Pivot
componentFolder="https://cdn.flexmonster.com/"
height={370}
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: "$",
},
],
}}
/>
</div>
</>
);
}
}
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.