Total Values Display - Copy this React, Tailwind Component to your project

<div className="h [86vh] w full flex flex row overflow hidden p 1 bg card background light dark:bg card background dark"> <div className="overflow auto rounded border solid bg card background light dark:bg card background dark w full top 0 "> <Grid item className="sticky z 10 mb 1.9 "> <SubHeaderOrganism displaycreateinvoicebtn={false} displayassetType={true} fromDate={fromDate} setFromDate={setFromDate} toDate={toDate} setToDate={setToDate} status={status} displayStatus={false} assetTypesList={assetTypesList} setStatus={setStatus} setAssetType={setAssetType} setRemainingLifeOfAsset={setRemainingLifeOfAsset} remainingLifeOfAsset={remainingLifeOfAsset} assetType={assetType} handleFilter={handleFilter} handleReset={handleReset} totalDepreciation = {totalDepreciation} totalWrittenDownValue = {totalWrittenDownValue} /> </Grid> <TableContainer component={Paper} className="h [63vh] overflow auto bg card background light dark:bg card background dark border 2" > <Table > <TableHead> <TableRow> {headers.map(({ label, width, className }) => ( <TableCell key={label} className={`${width} ${className} h 12 bg primary/10 dark:bg primary foreground/10 text primary foreground dark:text gray 300 font semibold`} > {label} </TableCell> ))} </TableRow> </TableHead> <TableBody> {assetData.length === 0 ? ( <TableRow> <TableCell colSpan={8} className="text center"> No records found </TableCell> </TableRow> ) : ( assetData.map((record) => ( <TableRow key={record.asset_id}> <TableCell className="text center text dark dark:text gray 300"> {record.asset_id} </TableCell> <TableCell className="text dark dark:text gray 300"> {record?.asset?.lineItem?.description || " "} </TableCell> <TableCell className="text center text dark dark:text gray 300"> {record?.asset?.lineItem?.assetType?.name || " "} </TableCell> <TableCell className="text center text dark dark:text gray 300"> {record?.asset?.lineItem?.amount || " "} </TableCell> <TableCell className="text center text dark dark:text gray 300"> {record.daysUsedSoFar || " "} </TableCell> <TableCell className="text center text dark dark:text gray 300"> {record.depreciationSoFar || " "} </TableCell> <TableCell className="text center text dark dark:text gray 300"> {record.writtenDownValueSoFar || " "} </TableCell> <TableCell className="text center text dark dark:text gray 300"> {record.remainingLifeSoFar || " "} </TableCell> </TableRow> )) )} </TableBody> </Table> </TableContainer> <TablePagination className= " bg card background light dark:bg card background dark text dark dark:text gray 300 border 2" rowsPerPageOptions={[8]} component="div" count={totalAssetsCount} rowsPerPage={rowsPerPage} page={page 1} onPageChange={(event, newPage) => setPage(newPage + 1)} onRowsPerPageChange={(event) => { const newRowsPerPage = parseInt(event.target.value, 10); setRowsPerPage(newRowsPerPage); setPage(1); }} /> </div> </div> rewrite above code with stickey header