Table Footer With Totals Block for React

Each entry stores its minutes and its hourly rate in cents. A helper adds the minutes and the amounts (minutes at the rate, rounded to a cent) of exactly the rows being shown, and the average rate is the amount billed divided by the hours logged, so it is weighted by time rather than a plain average of the rates. Nothing in the footer is typed.

Yes. The Client select shows every entry or one client's, and the footer, the count in the line next to the select and the polite announcement are all recomputed from the filtered rows. The frame keeps its height, so the page below never moves.

The column heads stick at the top of the frame and the footer sticks at its foot, each on a solid background so rows never show through. When a filter leaves few rows, the footer simply follows the last row.

It is a tfoot row: the first cell is the row header, "Totals", and every other total sits in the cell of its own column, with its name written out above the figure ("Total hours", "Total amount"). No cell spans several columns, so a screen reader can walk the footer like any row.

Service and Rate go below the large breakpoint, and on a phone the client folds under the date. The footer keeps every total that still has a column, and the polite line under the select carries the rest, such as the hours and the amount for the rows shown. Nothing scrolls sideways at 320 pixels.

The timesheet is typed in the file and the filter is plain state. To use real entries, load them into ENTRIES (in minutes and cents), and keep the totals as they are: they will follow whatever the table shows, including a filter or a page you add.