Body

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:

Formatters

  format?:
  | 'string'
  | 'number'
  | 'date'
  | 'dateTime'
  | 'currency'
  | 'boolean'
  | ((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.

  formatterPrecision?: number;

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:

Live Editor

function App() { const columns = [ createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), { ...createColumn("annualSalary", "string", "Salary"), format:(val) => { return `€ ${val.toFixed(2)}` } }, createColumn("stateCode", "string", "Territory"), createColumn("department", "string", "Department"), ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ behaviors:[createFilterBehavior({})], dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, }} /> ); }

function App() {
      const columns = [
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
    {
        ...createColumn("annualSalary", "string", "Salary"),
        format:(val) => {
            return `€ ${val.toFixed(2)}`
        }
    },
    createColumn("stateCode", "string", "Territory"),
    createColumn("department", "string", "Department"),
      ];

      return (
        <ReactDataGrid
          style={{ height: "400px", width: "100%" }}
          gridOptions={{
            behaviors:[createFilterBehavior({})],
            dataProvider: Employee.getAllEmployees(),
            uniqueIdentifierOptions: {
              useField: "employeeId",
            },
            columns,
          }}
        />
      );
}

Result

Loading...

Label Function

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:

Live Editor

function App() { const columns = [ createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), { ...createColumn("annualSalary", "string", "Salary"), labelFunction:(item, column) => { return `${item.firstName}'s Salary : € ${item.annualSalary.toFixed(2)}` } }, ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ behaviors:[createFilterBehavior({})], dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, }} /> ); }

function App() {
      const columns = [
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
    {
        ...createColumn("annualSalary", "string", "Salary"),
        labelFunction:(item, column) => {
            return `${item.firstName}'s Salary : € ${item.annualSalary.toFixed(2)}`
        }
    },
      ];

      return (
        <ReactDataGrid
          style={{ height: "400px", width: "100%" }}
          gridOptions={{
            behaviors:[createFilterBehavior({})],
            dataProvider: Employee.getAllEmployees(),
            uniqueIdentifierOptions: {
              useField: "employeeId",
            },
            columns,
          }}
        />
      );
    }

Result

Loading...

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

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:

Live Editor

function App() { const columns = [ createColumn("firstName", "string", "First Name"), createColumn("lastName", "string", "Last Name"), { ...createColumn("annualSalary", "string", "Salary"), itemRenderer:({node}) => { const item = node.rowPosition.data; return <div style={{color:"red"}}>{item.firstName}'s Salary : € {item.annualSalary.toFixed(2)}</div> } }, ]; return ( <ReactDataGrid style={{ height: "400px", width: "100%" }} gridOptions={{ behaviors:[createFilterBehavior({})], dataProvider: Employee.getAllEmployees(), uniqueIdentifierOptions: { useField: "employeeId", }, columns, }} /> ); }

function App() {
      const columns = [
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
    {
        ...createColumn("annualSalary", "string", "Salary"),
        itemRenderer:({node}) => {
            const item = node.rowPosition.data;
            return <div style={{color:"red"}}>{item.firstName}'s Salary : € {item.annualSalary.toFixed(2)}</div>
        }
    },
      ];

      return (
        <ReactDataGrid
          style={{ height: "400px", width: "100%" }}
          gridOptions={{
            behaviors:[createFilterBehavior({})],
            dataProvider: Employee.getAllEmployees(),
            uniqueIdentifierOptions: {
              useField: "employeeId",
            },
            columns,
          }}
        />
      );
}

Result

Loading...

See it in action

You can copy the code above and run it here

More examples

There is an example of using item renderers to render a custom component here

There is a link to the source code of the example here. As you can see, the item renderer can be used to render images, icons, links, tooltips, and even interactive components that allow you to interact with the data.

Performance

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.