Override TypeScript type declarations from imported modules

OverrideTSDeclaration.tsx

// Credit:
// https://stackoverflow.com/questions/43952198/how-to-override-or-extend-a-libary-type-definition-in-typescript
// https://stackoverflow.com/questions/40322788/how-to-overwrite-incorrect-typescript-type-definition-installed-via-types-packa

import {
  MUIDataTable,
  TableToolbarSelect,
} from 'mui-datatables';

// ⭐️ This is where the magic happens:
declare module 'mui-datatables' { // re-declare import
  export interface MUIDataTableToolbarSelect { // re-declare interface
    selectedRows: MUIDataTableSelectedRows; // add/override missing prop
  }
}

interface ToolbarBodyFooterOptions {
  columns: any[];
  count: number;
  data: any[];
  selectableRows: SelectableRows;
  selectedRows: MUIDataTableSelectedRows;
}

export const DataTable: React.FC<DataTableProps> = ({ options, data, columns, ...props}) => {

  const toolbarBodyFooter = (
    toolbarOptions: ToolbarBodyFooterOptions
  ) => (
    <TableToolbarSelect
      options={{
        customToolbarSelect: () => <Button>Whatever</Button>,
        textLabels: {
          selectedRows: {
            text: 'row(s) selected',
            delete: 'Delete',
            deleteAria: 'Delete Selected Rows',
          }
        }
      }}
      selectedRows={toolbarOptions.selectedRows}
      // onRowsDelete={this.selectRowDelete}
      // displayData={displayData}
      // selectRowUpdate={this.selectRowUpdate}
      // components={this.props.components}
    />
  );

  const tableOptions = {
    customTableBodyFooterRender: (
      toolbarOptions: NestedMUIDataTableToolbarBodyFooterOptions
    ) => toolbarBodyFooter(toolbarOptions),
    ...options
  }
  
  return (
    <ThemeProvider theme={(baseTheme: Theme) => themeOverrides(baseTheme, options)}>
      <MUIDataTable
        data={data}
        columns={columns}
        options={tableOptions}
        components={{ Checkbox: CustomCheckbox }}
      />
    </ThemeProvider>
  );
}