Extending React-Table using composition - issues with props

Question

I'm trying to create a component based on react-table using composition so that we can use a customised version everywhere without repeating boiler plate. I'm using Typescript while react-table doesn't use it. I don't see any examples around of doing this so here's what I've come up with so far:

import * as React from 'react'
import ReactTable, {TableProps} from 'react-table'
import './../components/react-table-styling.css'
import 'react-table/react-table.css'
import Pagination from './pagination'
import { Paper } from '@material-ui/core'

export interface IReactTableProps{
    textCols:Array<string>;
}

export class ExtReactTable extends React.Component<IReactTableProps & TableProps> {

static defaultProps = {
}

constructor(props: IReactTableProps & TableProps) {
    super(props);
}

rows = (state, rowInfo) => {//set taller height and vertical centering
return {  
    style: { height:40, display:'flex', alignItems: 'center'},
}
}

headerRows = (state, rowInfo, column) => {
    return {
        style: { height: 40, display:'flex', alignItems: 'center', 
        paddingLeft: (column.Header === 'Product'||column.Header === 
'Client') ? '20px':'', 
         justifyContent: (column.Header === 'Product'||column.Header === 
'Client') ? '': 'center' }
  }
}

render() {
  return(
  <Paper>
  <ReactTable style={{cursor:'pointer', fontSize: 13, background:'#fff', borderLeft: 0, borderRight: 0}} PaginationComponent={Pagination}
      getTrProps={this.rows} getTheadThProps={this.headerRows} />
 </Paper>)
}
}

Trying to get it initially working, I use it like this:

import { ExtReactTable } from '../../components/ext-react-table';

 <ExtReactTable data={products} textCols={["Product"]} columns={[
          {Header: "Product", accessor: "permitProductName", minWidth: 200, style: { paddingLeft:20}},
          {Header: "Client",accessor: "clientName", minWidth: 300, style: { paddingLeft:20}},
          {Header: "Spaces", accessor: "spaces", minWidth:80, style: { textAlign: 'right', paddingRight:'4%'}},
          {Header: "Active VRMs", accessor: "activeVRMs", minWidth:80, style: { textAlign: 'right', paddingRight:'4%'}},
          {Header: "Max VRMs", accessor: "maxVRMs", minWidth:80, style: { textAlign: 'right', paddingRight:'4%'}},
          {Header: "Start Date", accessor: "startDate", style: { textAlign: 'center'}, Cell: (props) => { return <span>{dateTimeHelper.shortDate(props.original.startDate)}</span>}},
        {Header: "End Date", accessor: "endDate", style: { textAlign: 'center'}, Cell: (props) => { return <span>{(props.original.endDate !== "0001-01-01T00:00:00" && props.original.endDate !== null) ? dateTimeHelper.shortDate(props.original.endDate) : '-'}</span>}}
      ]}
      defaultSorted={[ { id: "permitProductName",  asc: true }]}
      defaultPageSize={10} className={" -highlight"}
 />

but it complains that I am not supplying the optional prop 'loading' (and if you supply that then dozens of other props of react-table for which you wouldn't want to supply values). What's the approach to solving this issue? Do you have to provide dozens of values as defaultProps or is there some other way? Thanks

Answer 1

It looks like loading and so forth are required properties of the TableProps interface (here), but ReactTable actually uses Partial<TableProps> as its props type (here). If you replace TableProps with Partial<TableProps> in your code to be consistent, then the errors should go away.