Now that we have covered headers, footers, filters, toolbar, lets dive into the most important part of the grid, the data!
When you define a column, one of the options you have in addition to the header text and the data field, is the format. Below are the values you can use for the format property:
| ((value: unknown) => string);
As you can see, you can use a string to define the format, or you can use a function. The function will be called with the value of the cell and should return a string. This is useful if you want to format the value in a custom way.
The format property is used to determine how to display the value in the cell. Numbers are formatted using the toFixed method using a default of 2 decimal places. Dates are formatted using dd-mmm-yyyy eg (12-Dec-2023). Booleans are converted to Yes/No. Currencies are are formatted with the long scale format (1,000.00|1,000,000.00 amd so on). Strings are not formatted. If you want to customize the precision of the number format, you can use the formatterPrecision property.
However, if you want to customize any other aspect of the format, you can just specify a function value for the format. Let us look at an example:
Sometimes, you need access to the column in addition to the value of the cell. For example, you may want to format the value of the cell based on the column. In this case, you can use the labelFunction property.
labelFunction?: (item: unknown, column: ColumnOptions) => string;
Let us look at an example:
In this example, we are using the labelFunction to display the first name and the salary of the employee. The labelFunction is called with the item and the column. The item is the row data and the column is the column definition. You can use this to format the value of the cell based on the column.
Item renderers are used to render the content of the cell. You can use the itemRenderer property to specify a custom renderer for the cell. The itemRenderer property is a function that is called with the VirtualTreeNode. The VirtualTreeNode contains the row data and the column definition. You can use this to render the cell in any way you want.
itemRenderer?: (props: RendererProps) => unknown;
Let us look at an example:
You can copy the code above and run it here
Item renderers are a very powerful feature. They allow you to completely take over the rendering of the grid, but please be aware, using heavy components in the item renderers can have a negative impact on the performance of the grid. For most cases, its fine, but if you are rendering a lot of data, you may want to measure the performance impact of your item renderer, especially in scrolling scenarios.