<GridComponent
ref={(grid) => (gridRef.current = grid)}
dataSource={data}
dataStateChange={dataStateChange}
allowPaging={true}
allowSorting={true}
allowMultiSorting={false}
allowTextWrap={true}
showColumnMenu={true}
columnMenuItems={["AutoFitAll", "AutoFit", "SortAscending", "SortDescending"]}
style={{ isolation: "isolate" }}
pageSettings={{
pageSize: take,
pageCount: 3,
pageSizes: ["5", "10", "15", "20", "50", "100", "200"],
}}
allowExcelExport={true}
queryCellInfo={queryCellInfoEvent}
excelExportComplete={excelExportComplete}
contextMenuItems={[
{
text: "Export",
items: [
{ id: "csvExport", text: "CSV Export", iconCss: "e-svg-file-delimited-outline" },
{ id: "excelExport", text: "Excel Export", iconCss: "e-svg-microsoft-excel" },
],
},
]}
contextMenuClick={contextMenuClick}
commandClick={commandClick}
loadingIndicator={{ indicatorType: "Shimmer" }}
>
<Inject
services={[Page, ExcelExport, Resize, Sort, ColumnMenu, CommandColumn, ContextMenu]}
/>
<ColumnsDirective>
<ColumnDirective field="field1" headerText="field1" width={250} />
<ColumnDirective
field="field2"
headerText="field2"
disableHtmlEncode={false}
template={template}
/>
<ColumnDirective
field="field3"
headerText="field3"
textAlign="Right"
width={180}
/>
ColumnsDirective>
GridComponent>
I'm also sharing dataStateChange and excelExportComplete methods just in case,
function dataStateChange(state: DataStateChangeEventArgs) {
if (state.action?.requestType === "paging") {
setGridDataState({ take: Number(state.take), skip: Number(state.skip) });
}
if (state.action?.requestType === "sorting") {
const name = state.sorted?.[0].name;
const direction = state.sorted?.[0].direction;
setGridDataState({
sortBy: name as SortByCustomReport,
sortOrder:
direction === "ascending" ? "asc" : direction === "descending" ? "desc" : undefined,
});
}
}
function excelExportComplete() {
if (gridRef.current && data) {
gridRef.current.dataSource = data;
gridRef.current.hideSpinner();
}
}
My template,
const template = (data: any) => {
return data.field2.split(",").map((label, index) => (
<Tag size="sm" key={index} variant="solid" colorScheme="teal">
{label}
Tag>
));
};
