const data = () => [
		{
			key: "1",
			item_one: "Item_One One",
			item_two: "Item_Two Two",
			item_three: 5,
			item_four_one: "Item_Four_One 1",
			item_four_two: "Item_Four_Two 2",
			item_four_three: "Item_Four_Three 1",
			selected: false
		},
		{
			key: "2",
			item_one: "Item_One One",
			item_two: "Item_Two Three",
			item_three: 6,
			item_four_one: "Item_Four_One 1",
			item_four_two: "Item_Four_Two 2",
			item_four_three: "Item_Four_Three 1",
			selected: false
		},
		{
			key: "3",
			item_one: "Item_One Two",
			item_two: "Item_Two Five",
			item_three: 1,
			item_four_one: "Item_Four_One 1",
			item_four_two: "Item_Four_Two 2",
			item_four_three: "Item_Four_Three 1",
			selected: false
		},
		{
			key: "4",
			item_one: "Item_One Two",
			item_two: "Item_Two Three",
			item_three: 6,
			item_four_one: "Item_Four_One 1",
			item_four_two: "Item_Four_Two 2",
			item_four_three: "Item_Four_Three 1",
			selected: false
		}
	];

	const columns = (): Column[] => [
		{
			field: "item_one",
			title: "Item One",
			filterType: "text",
		},
		{
			field: "item_two",
			title: "Item Two",
			filterType: "text",
		},
		{
			field: "item_three",
			title: "Item Three",
			filterType: "numeric",
		},
		{
			field: "item_four",
			title: "Item Four",
			children: [
				{
					field: "item_four_one",
					title: "Item Four One"
				},
				{
					field: "item_four_two",
					title: "Item Four Two",
				},
				{
					field: "item_four_three",
					title: "Item Four three",
				}
			]
		},
	];


	const groups = [
		{field: "item_one", aggregates: [{ field: "item_three", aggregate: "sum" }] },
		{field: "item_two", aggregates: [{ field: "item_three", aggregate: "sum" }] }
	];

	const groupRenderer = (aggregates, field) => {
		const aggregate = aggregates.item_three.sum;
		if (field === "item_three") {                    
			return(aggregate && <> Total Item Three: {aggregate} </>)
		}
		return null;
	}

const excelReportColumns = columns.map((column) => {
		return {
			field: column.field,
			title: column.title,
			children: column.children,
			groupHeader: (props: ExcelExportGroupHeaderProps) => groupRenderer(props.aggregates, props.field),
		} as ExcelExportColumnProps;
	}

return (
		<ExcelExport
			{...restExcelExportProps}
			creator={author}
			data={process(data, { sort: sortDesc, filter: filterDesc, group: groups }).data}
			ref={excelExporter}
			columns={excelReportColumns}
			group={groups}
		>
		</ExcelExport>
	)

const excelReportColumns = columns.map((column) => {
        return {
            field: column.field,
            title: column.title,
            children: column.children,
            groupFooter: (props: ExcelExportGroupFooterProps) => groupRenderer(props.aggregates, props.field),
        } as ExcelExportColumnProps;
    }

export interface ExcelExportColumnProps extends ColumnBase {
		/**
		 * The options of the column data cells.
		 */
		cellOptions?: CellOptions;
		/**
		 * The field to which the column is bound.
		 */
		field?: string;
		/**
		 * The options of the column footer cell.
		 */
		footerCellOptions?: CellOptions;
		/**
		 * The column footer. Can be a function or a React component.
		 */
		footer?: Function | ExcelExportFooter;
		/**
		 * The options of the column group footer cells.
		 */
		groupFooterCellOptions?: CellOptions;
		/**
		 * The header of the group. Can be a function or a React component.
		 */
		groupHeader?: Function | ExcelExportGroupHeader;
		/**
		 * The footer of the group. Can be a function or a React component.
		 */
		groupHeader?: Function | ExcelExportGroupFooter;
		/**
		 * The options of the column group header cells.
		 */
		groupHeaderCellOptions?: CellOptions;
	}