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: "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: "$",
},
],
}}
/>
</div>
</>
);
}
}
export default PivotTableDemo;
This neat non-hierarchical React grid view lets end users show CSV and JSON data in a way that data come from the data source - nonaggregated 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 slice and configuration, order, filter, and sort data. It is also possible to show grand totals of the measures and put them at the top 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.