Using & rendering tree icons

View as Markdown

To make a column render the tree icon, you have to set columns.renderTreeIcon to true. This will cause the default tree icon to be rendered for non-leaf nodes.

const columns: Record<string, InfiniteTableColumn<FileSystemNode>> = {
  name: {
    field: 'name',
    renderTreeIcon: true,
  },
  type: { field: 'type' },
  extension: { field: 'extension' },
  size: { field: 'sizeInKB', type: 'number' },
};

If you don't have columns.renderTreeIcon set, there will be no tree column to render the tree icon.

Tree icon rendering

loading demo…

Customizing the tree icon#

There are multiple ways to customize the tree icon.

First, you can very easily change the color of the icon. The color of the icon is controlled by the --infinite-expand-collapse-icon-color CSS variable, and defaults to --infinite-accent-color, but you can also set it to any other color you want.

.Infinite {
  --infinite-expand-collapse-icon-color: #6f6f6f;
}

Customizing the tree icon color

loading demo…

If you want to go further, use a function for the column.renderTreeIcon property - the next section will go into more detail on this.

Rendering a custom tree icon for both parent and leaf nodes#

When columns.renderTreeIcon is true, the tree icon will be rendered only for parent nodes.

In your implementation of the renderTreeIcon function, you'll use the rowInfo.nodeExpanded property.

Note that the property is only available for parent nodes, so you'll first have to use the rowInfo.isParentNode property as a TS discriminator to check if the node is a parent node.

const renderTreeIcon: InfiniteTableColumn<FileSystemNode>['renderTreeIcon'] = ({ rowInfo }) => {
  if (!rowInfo.isParentNode) {
    // rowInfo.nodeExpanded not available here
    return <FileIcon />;
  }

  // it's now OK for TS to use rowInfo.nodeExpanded
  return  <FolderIcon open={rowInfo.nodeExpanded} onClick={toggleCurrentTreeNode} />
};

However when you specify a function, it will be called for both parent and leaf nodes (if you don't want an icon for leaf nodes, simply return null).

This gives you maximum flexibility to icons. A common example is a file explorer, where you might want to render icons not only for folders, but also for files.

Rendering a custom tree icon for both parent and leaf nodes

This example renders a custom tree icon and uses the toggleCurrentTreeNode function to toggle the node state when Clicked. toggleCurrentTreeNode is a property of the argument passed to the renderTreeIcon function.

loading demo…

If you implement a custom columns.renderTreeIcon function for your column, you can still use the default tree icon.

Use renderBag.treeIcon property in the JSX you return (the renderBag is available as a property of the cellContext argument of the renderTreeIcon function).