A React component library for building interactive pivot tables focused on data analysis and visualization. Perfect for creating in-house analytics dashboards and ad-hoc data exploration pages.
- Pivot table rendering
- Support for multiple themes
- Override table elements for customizations
📚 Visit our homepage for more examples and detailed documentation.
Install the package:
npm install explore-tablesImport and use:
import { PivotTable } from "explore-tables"
import 'explore-tables/themes/default.css';
const SimpleTable = () => {
// The data that is morphed into a pivot during rendering.
// Note that the dataset should be unique between dimensions + pivots.
// In case when duplicate records are found, the pivot table displays the last value.
const data = [
{ category: 'Furniture', product: 'Chair', region: 'North', sales: 100 },
{ category: 'Furniture', product: 'Table', region: 'North', sales: 250 },
{ category: 'Electronics', product: 'Phone', region: 'South', sales: 300 },
{ category: 'Electronics', product: 'Laptop', region: 'South', sales: 1200 },
];
// Render the data.
// Note that pivot tables do not aggregate the data, but merely display it
return <PivotTable
rows={data}
fields={[
{ id: 'category', name: 'Category' },
{ id: 'product', name: 'Product' },
{ id: 'region', name: 'Region' },
{ id: 'sales', name: 'Sales' }
]}
dimensions={['category', 'product']}
measures={['sales']}
pivots={['region']}
/>
}The above example will render a pivot table like this:
- Dataset records should be unique between dimensions and pivots
- In case of duplicate records, the pivot table displays the last value
- The pivot table displays data as-is without aggregation
To run the development server:
npm run devWe welcome contributions! For major changes, please open an issue first to discuss your proposed changes.
- Bogdans b.ozerkins@outlook.com