seahaven-ap/src/dashboard/InvoiceDataGrid.tsx

import { DataGrid, type DataGridProps, type GridValidRowModel } from "@mui/x-data-grid";

type InvoiceDataGridProps<R extends GridValidRowModel> = DataGridProps<R> & {
  "data-testid": string;
};

export function InvoiceDataGrid<R extends GridValidRowModel>({
  "data-testid": testId,
  ...props
}: InvoiceDataGridProps<R>) {
  return (
    <div data-testid={testId}>
      <DataGrid
        autoHeight
        disableColumnMenu
        disableRowSelectionOnClick
        pageSizeOptions={[10, 25]}
        initialState={{
          pagination: { paginationModel: { pageSize: 10, page: 0 } },
        }}
        getRowId={(row) => row.id as string}
        sx={{
          border: 1,
          borderColor: "divider",
          backgroundColor: "background.paper",
        }}
        {...props}
      />
    </div>
  );
}