A flat table is a form of Flexmonster Pivot that displays raw data in an Excel-like data grid view.
Play with the demo on a larger screen: save this link for later or watch the video review now.
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.