升级Clarity至1.0.2后自定义嵌套Datagrid树表组件失效，求解决办法

Hey there, let's break down what's going on with your custom tree table component and explore practical paths forward.

Status of Native Tree Table Support #

To start with your question about whether the functionality can be "restored": The breaking issue you're facing comes directly from Clarity's 1.0.0 Datagrid refactor, which completely overhauled the component's rendering logic (as noted in the GitHub issue you referenced).

At the time of that refactor, the Clarity team focused on core Datagrid performance and architecture improvements, which meant dropping compatibility with custom nested row implementations. Right now, there's no official timeline for adding a native tree table component to Clarity. That said, you can help move this forward by:

• Adding a comment to the existing issue to highlight your use case and reinforce community demand
• Submitting a detailed feature request in the Clarity GitHub repo, explaining how a native tree table would benefit your project

Feasible Alternative Solutions #

If you need a working tree table right now, here are a few actionable approaches:

1. Adapt Your Custom Implementation to Clarity 1.0+ #

You can rebuild your tree table to align with the updated Datagrid rendering model. Here's a high-level plan:

• Flatten your data structure: Replace nested objects with a flat array that includes level and parentId properties to track hierarchy—this plays much nicer with Clarity's *clrDgItems loop.
• Add visual indentation via CSS: Use the level property to apply dynamic padding-left to row content, creating the nested tree-like appearance.
• Implement custom expand/collapse: Add a button to parent rows, bind click events to toggle an isExpanded flag, and use *ngIf or array filtering to show/hide child rows.
• Preserve virtual scrolling: If you rely on Datagrid's virtual scroll, make sure your row filtering logic doesn't disrupt the component's ability to track visible rows efficiently.

2. Use a Third-Party Component with Clarity Styling #

If rebuilding your custom component feels too time-consuming, consider using a mature Angular tree table component and adapting its styles to match Clarity's design system:

• Pick components that support heavy customization (like PrimeNG TreeTable or Angular Material Tree)
• Override default styles to use Clarity's color palette, spacing rules, and typography guidelines
• This approach lets you leverage pre-built tree table logic while keeping your UI consistent with the rest of your Clarity-based app

3. Build a Lightweight Custom Tree Table #

If you don't need all the advanced features of Clarity Datagrid (like sorting, filtering, or virtual scroll), a lightweight custom implementation might be the simplest path:

• Use Clarity's base clr-table and clr-table-row classes to maintain visual consistency
• Create a recursive Angular component to render nested rows
• Handle expand/collapse logic internally using component state

内容的提问来源于stack exchange，提问作者V_R