KnoxUI
KnoxUI

PivotTable Component

The PivotTable component allows users to create dynamic pivot tables from a given dataset.

Props

PropTypeDefaultDescription
initialDataArray<DataItem>requiredInitial dataset for the pivot table
titlestring"Pivot Table"Title of the pivot table
classNamestring""Additional CSS classes for the pivot table wrapper

Usage

import { PivotTable } from 'knoxui-react';

const initialData = [
  { category: 'Fruits', item: 'Apple', region: 'North', sales: 100 },
  { category: 'Fruits', item: 'Banana', region: 'South', sales: 150 },
  { category: 'Vegetables', item: 'Carrot', region: 'East', sales: 80 },
  { category: 'Vegetables', item: 'Broccoli', region: 'West', sales: 120 },
  { category: 'Fruits', item: 'Apple', region: 'South', sales: 90 },
  { category: 'Vegetables', item: 'Carrot', region: 'North', sales: 110 },
];

<PivotTable initialData={initialData} title="Sales Data" />

Features

  • Drag and drop fields to configure rows, columns, and values
  • Aggregation options (SUM, COUNT)
  • Sorting and filtering capabilities
  • Export to Excel and PDF
  • Responsive design

Example

Basic PivotTable

Values

Rows

Columns

Available Fields

category
item
region
sales

Sales Data

Usage Instructions

  1. Drag fields from the "Available Fields" section to "Values", "Rows", or "Columns".
  2. Use the "SUM" or "COUNT" options in the "Values" section to change the aggregation type.
  3. Drag fields within "Rows" or "Columns" to change their order.
  4. Use the search box above the pivot table to filter data globally.
  5. Click on column headers to sort the data.
  6. Use the export buttons to download the data as Excel or PDF.