Customizing Pivot Columns
There are a number of ways to customize the generated pivot columns and we'll cover each of them in this page
Inheriting from initial columns#
Pivoting is all about aggregations, so you need to specify the 
reducers that will aggregate your data. Each reducer can have a field property that specifies the field that will be used for aggregation.If the table 
columns collection already has a column bound to the field used in the aggregation, the column configuration will be inherited by the generated pivot column.const columns: InfiniteTablePropColumns<Developer> = {
  preferredLanguage: {
    field: 'preferredLanguage',
    style: { color: 'blue' },
  },
  age: {
    field: 'age',
    style: {
      color: 'magenta',
      background: 'yellow',
    },
  },
  salary: {
    field: 'salary',
    type: 'number',
    style: {
      color: 'red',
    },
  },
  canDesign: { field: 'canDesign' },
  country: { field: 'country' },
  firstName: { field: 'firstName' },
  id: { field: 'id' },
};
const avgReducer: InfiniteTableColumnAggregator<Developer, any> = {
  initialValue: 0,
  reducer: (acc, sum) => acc + sum,
  done: (sum, arr) => {
    return Math.floor(arr.length ? sum / arr.length : 0);
  },
};
const aggregationReducers: DataSourceProps<Developer>['aggregationReducers'] = {
  // will have the same configuration as the `salary` column
  avgSalary: { field: 'salary', ...avgReducer },
  avgAge: {
    field: 'age',
    ...avgReducer,
    pivotColumn: {
      // will have the same configuration as the `preferredLanguage` column
      inheritFromColumn
 COPY
View Mode
 Fork Forkimport { InfiniteTable, DataSource, GroupRowsState, } from '@infinite-table/infinite-react'; import type { DataSourcePropAggregationReducers, InfiniteTableColumnAggregator, InfiniteTablePropColumns, DataSourceGroupBy, DataSourcePivotBy, } from '@infinite-table/infinite-react'; import * as React from 'react'; type Developer = { id: number; firstName: string; lastName: string; country: string; city: string; currency: string; preferredLanguage: string; stack: string; canDesign: 'yes' | 'no'; hobby: string; salary: number; age: number; }; const dataSource = () => { return fetch('https://infinite-table.com/.netlify/functions/json-server' + '/developers100') .then((r) => r.json()) .then((data: Developer[]) => data); }; const avgReducer: InfiniteTableColumnAggregator<Developer, any> = { initialValue: 0, reducer: (acc, sum) => acc + sum, done: (sum, arr) => (arr.length ? sum / arr.length : 0), }; const columnAggregations: DataSourcePropAggregationReducers<Developer> = { avgSalary: { field: 'salary', name: 'Average salary', ...avgReducer, }, avgAge: { field: 'age', ...avgReducer, pivotColumn: { defaultWidth: 500, inheritFromColumn: 'firstName', }, }, }; const columns: InfiniteTablePropColumns<Developer> = { id: { field: 'id' }, firstName: { field: 'firstName', style: { fontWeight: 'bold', }, renderValue: ({ value }) => <>{value}!</>, }, preferredLanguage: { field: 'preferredLanguage' }, stack: { field: 'stack' }, country: { field: 'country' }, canDesign: { field: 'canDesign' }, hobby: { field: 'hobby' }, city: { field: 'city' }, age: { field: 'age' }, salary: { field: 'salary', type: 'number', header: 'Salary', style: { color: 'red' }, }, currency: { field: 'currency' }, }; const groupRowsState = new GroupRowsState({ expandedRows: [], collapsedRows: true, }); export default function PivotByExample() { const groupBy: DataSourceGroupBy<Developer>[] = React.useMemo( () => [ { field: 'preferredLanguage', }, { field: 'stack' }, ], [], ); const pivotBy: DataSourcePivotBy<Developer>[] = React.useMemo( () => [ { field: 'country' }, { field: 'canDesign', }, ], [], ); return ( <> <DataSource<Developer> primaryKey="id" data={dataSource} groupBy={groupBy} pivotBy={pivotBy} aggregationReducers={columnAggregations} defaultGroupRowsState={groupRowsState} > {({ pivotColumns, pivotColumnGroups }) => { return ( <InfiniteTable<Developer> columns={columns} hideEmptyGroupColumns pivotColumns={pivotColumns} pivotColumnGroups={pivotColumnGroups} columnDefaultWidth={180} /> ); }} </DataSource> </> ); }