I have a datagrid from devextreme reactjs, Which is basically renders the provided as shown below. So While doing that I got set a search Box in the Summary area or below the column. How could I do that
code snippest
<DataGrid noDataText='No Data Available!!!'
dataSource={tokenList}
showBorders={true}
>
<Paging defaultPageSize={5} />
<Pager
visible={true}
displayMode="full"
showInfo={true}
showPageSizeSelector={true} />
<Column dataField="tokenNum" caption={formatMessage('Token_Number')} allowEditing={false} alignment='left' />
<Column dataField="truckNum" caption={formatMessage('Truck_Number')} allowEditing={false} alignment='left' />
<Column dataField="friendlyName" caption={formatMessage('Friendly_Name')} allowEditing={false} alignment='left' />
<Column dataField="commodityname" caption={formatMessage('Commodity')} allowEditing={false} alignment='left' />
<Column dataField="noofbags" caption={formatMessage('No_Of_Bags')} allowEditing={false} alignment='left' />
<Column dataField="transactiontype" caption={formatMessage('Transaction_Type')} allowEditing={false} alignment='left' />
<Column dataField="tokenIssuedOn" caption={formatMessage('Token_Issue_Date')} allowEditing={false} alignment='left' />
<Column dataField="tokenStatus" caption={formatMessage('Status')} allowEditing={false} alignment='left' />
<Column
allowSorting={false}
caption="#"
cellRender={(rowData) => shouldRender(rowData.data)}
/>
{/* TODO : need to create a search pannels and select pannel for this part */}
</DataGrid>
I try to add GroupItem and then add NumberBox into it but it’s not working as intended. As a matter of fact the NumberBox is not displaying.