Better type definitions for TreeGrid column templates

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 />

syncfusion / ej2-react-ui-components

Better type definitions for TreeGrid column templates #146