I'm using react to render HTML and I'm using PagingPanel Plugin
from react-grid.
However when I add this rule:
import { PagingPanel } from '@devexpress/dx-react-grid';
And in my render()
I add this rule:
<PagingPanel />
It gives me the following error:
Type '{}' is not assignable to type 'PagingPanelProps'.
Property 'containerComponent' is missing in type '{}'.
What am I missing?
I'm using PagingPanel
inside the grid
component also from react-grid
My code inside the render
method:
<Grid rows={this.props.ConnectedConnectors}
columns={[{ name: "guid", title: "Guid" }]}>
<SortingState sorting={this.props.sorting} onSortingChange={this.props.changeSorting} />
<SearchState value={this.props.searchValue} onValueChange={this.props.changeSearchValue} />
<IntegratedFiltering />
<IntegratedSorting />
<PagingState pageSize={10} currentPage={this.props.pageNumber} onCurrentPageChange={this.props.changePageNumber} />
<IntegratedPaging />
<Table cellComponent={this.renderCell.bind(this)} columnExtensions={this.tableColumnExtensions} tableComponent={TableComponent} />
<Toolbar />
<SearchPanel />
<TableHeaderRow showSortingControls />
<TableColumnVisibility hiddenColumnNames={hiddenColumnNames} emptyMessageComponent={NoGridColumnsMessage} />
<PagingPanel /> // the one with the error mark
<SelectionState />
<TableSelection selectByRowClick highlightRow showSelectionColumn={false} key="id" />
</Grid>
Check out the documentation on this component here
You will want to use a PagingPanel
from one of the theme components if you are not providing a custom component.
Excerpt:
// Use the following statement to import a plugin with embedded theme components:
import { PagingPanel } from '@devexpress/dx-react-grid-material-ui';
import { PagingPanel } from '@devexpress/dx-react-grid-bootstrap4';
import { PagingPanel } from '@devexpress/dx-react-grid-bootstrap3';
// If you want to use custom components, you can import the themeless plugin:
import { PagingPanel } from '@devexpress/dx-react-grid';