Customization
The KendoReact Server Grid lets you customize its UI by passing custom components to its content. You can customize the following components:
KendoReact Server Components are in an experimental phase and are not intended for production use. APIs may change without introducing a breaking change. Please refer to the Umbrella GitHub issue for general feedback, bug reports, and more information.
DataCell
You can customize the data cells of the KendoReact Server Grid by passing a custom DataCell component to the Grid. The DataCell component is invoked for each cell within the Grid.
import { GridDataCell } from "@progress/kendo-react-server-grid";
const CustomCell = (props: GridDataCellProps) => {
const [column] = props.context?.useGridDataColumnState();
const [data] = props.context?.useGridDataItemData();
return column.field === "Discontinued" ? (
<GridDataCell {...props} style={{ color: data.Discontinued === false ? "red" : "green" }}>
{data.Discontinued === false ? "Unavailable" : "Available"}
</GridDataCell>
) : (
<GridDataCell {...props} />
);
};
// ...
export default async function Page() {
return (
<>
<Grid
// ...
DataCell={CustomCell}
/>
</>
);
}The following example demonstrates how to customize the data cells in the KendoReact Server Grid.
DataRow
To customize the data rows of the KendoReact Server Grid, you need to pass a custom DataRow component to the Grid. The DataRow component is invoked for each row within the Grid.
import { GridDataRow } from "@progress/kendo-react-server-grid";
export const CustomRow = (props: GridDataRowProps) => {
const [data] = props.context?.useGridDataItemData();
return (
<GridDataRow
{...props}
style={{
backgroundColor:
data.UnitsInStock < 50
? data.UnitsInStock < 30
? "rgba(255, 0, 0, 0.3)"
: "rgba(255, 255, 0, 0.3)"
: "rgba(0, 255, 0, 0.3)",
}}
/>
);
};
// ...
export default async function Page() {
return (
<>
<Grid
// ...
DataRow={CustomRow}
/>
</>
);
}The following example demonstrates how to customize data rows in the KendoReact Server Grid:
