I am using Data Table from MUI, docs below.
https://mui.com/material-ui/react-table/#data-table
https://mui.com/
I am trying to add a summary row in my table, but I dont understand how.
Any Idea is apreciated.
My actual code:
import React, { useEffect, useState } from 'react';
import { DataGrid, GridRowsProp, GridColDef } from '@mui/x-data-grid';
import './Invoice.scss';
const Invoice = () => {
const rows = [
{ id: 1, col1: '1', col2: '', col3: 'Power Sweeping1', col4: '', col5: '1', col6: '$1.350,00', col7: '$1.350,00' },
{ id: 1, col1: '1', col2: '', col3: 'Power Sweeping2', col4: '', col5: '1', col6: '$1.350,00', col7: '$1.350,00' },
{ id: 1, col1: '1', col2: '', col3: 'Power Sweeping3', col4: '', col5: '1', col6: '$1.350,00', col7: '$1.350,00' },
];
const columns = [
{ field: 'col1', headerName: '#', width: 10 },
{ field: 'col2', headerName: 'Date', width: 150 },
{ field: 'col3', headerName: 'Product or service', width: 250 },
{ field: 'col4', headerName: 'SKU', width: 150 },
{ field: 'col5', headerName: 'Qty', width: 150 },
{ field: 'col6', headerName: 'Rate', width: 150 },
{ field: 'col7', headerName: 'Amount', width: 150 },
];
return (
<div className="container">
<h1>Invoice</h1>
<div id='table' className='row'>
<div style={{ height: 300, width: '100%' }}>
<DataGrid rows={rows} columns={columns}
hideFooterPagination="true"
hideFooterSelectedRowCount="true"/>
</div>
</div>
</div>
)};
export default Invoice;