Better type definitions for TreeGrid column templates

[EndBug]

Hey folks, it would be nice to have better typedefs for the template prop of the ColumnDirective component.

Right now the type is limited to string | Function | any, but that doesn't provide any info about the parameters accepted by the function. This info is not present in the docs either (React docs, API docs), you can find out about it only by inspecting the value at runtime.

Just to give an example of what I would be looking for in the types, here's the patch I've made for my project:

export type ColumnTemplateRow<TData = any> = TData & {
  index: number;
  taskData: TData;
  hasChildRecords: boolean;
  expanded: boolean;
  uniqueID: string;
  level: number;
  /** Not verified */
  checkboxState: "uncheck" | "check";
  childRecords: any[];
  column: {
    disableHtmlEncode: boolean;
    allowSorting: boolean;
    allowResizing: boolean;
    allowFiltering: boolean;
    allowGrouping: boolean;
    allowReordering: boolean;
    showColumnMenu: boolean;
    enableGroupByFormat: boolean;
    allowEditing: boolean;
    showInColumnChooser: boolean;
    allowSearching: boolean;
    autoFit: boolean;
    /** Not verified */
    sortDirection: "Ascending" | "Descending";
    uid: string;
    visible: boolean;
    index: number;
    /** Not verified */
    type: null;
  };
};

/**
 * This type has been defined based on the runtime value of the row parameter.
 * As of 2024-07-31, the type provided by Syncfusion in their latest version is
 * just `template?: string | Function | any;`
 * @see https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/treegrid/src/treegrid/columns-directive.tsx
 */
export type ColumnDirectiveTemplate<TData extends any[]> =
  | string
  | ((row: ColumnTemplateRow<TData[number]>) => React.ReactNode);

This is just a very rough version, but it's just enough to "patch" the type like this:

const colTemplate: ColumnDirectiveTemplate<Data[]> = (row) => <> ... </>

<TreeGrid
  // ...
>
  <ColumnsDirective>
    {/* ... */}
    <ColumnDirective template={colTemplate}></ColumnDirective>
  </ColumnsDirective>
<TreeGrid />

[ghost]

Fix for the issue “Interface or type missing for Column Template Event Handler” had been rolled out in our weekly patch release. So you can upgrade to version(26.2.14) or to the latest version of Syncfusion package to resolve the reported issue.

ColumnTemplateArgs interface can be used to achieve your requirement.

Refer to the below screenshot,

Release notes: https://ej2.syncfusion.com/react/documentation/release-notes/26.2.14?type=all#tree-grid