This is issue is probably down to how I'm implementing the grid, but the buttons to alter the amount of rows visible in the pages don't do anything.
I'm using typescript with tsx files, which is from the template I used to create the project from yeoman.
public render() {
let contents = this.state.loading
? <p><em>Loading...</em></p>
: this.state.view === "Export"
? ParagonAdmin.renderExportsTable(this.state.exportData)
: this.state.view === "Teams"
? ParagonAdmin.renderTeamTable(this.state.teamData)
: this.state.view === "Jobs"
? ParagonAdmin.renderJobsTable(this.state.jobData)
: <p>Error</p>;
return <div>
<div className="navigation-contextual navigation-main">
<ul>
<li><a className="btn menu-btn" >Teams</a></li>
<li><a className="btn menu-btn" >File Extract Log</a></li>
<li><a className="btn menu-btn" >Global Address</a></li>
<li><a className="btn menu-btn" >Reg Ex Report</a></li>
</ul>
</div>
<h1>Administration</h1>
{contents}
</div>;
}
`private static renderJobsTable(dataJobs: JobsData[]) {
const pagesizes = [5, 10, 15, 0];
return <div>
<Grid rows={dataJobs} columns={[{ name: 'JcId', title: 'Id' }, { name: 'JmCustref1', title: 'Customer Reference' }, { name: 'JcDescription', title: 'Description' }]}>
<FilteringState defaultFilters={[]} />
<LocalFiltering />
<SortingState />
<LocalSorting />
<PagingState
defaultCurrentPage={0}
pageSize={25}
/>
<LocalPaging />
<TableView />
<TableHeaderRow allowSorting />
<PagingPanel />
<TableFilterRow />
</Grid>
</div>;
}`