constantin-p
commented
1 year ago Hi @prototechdeveloper123,
The table component allows for full control over the rendered cell layout for any given column - In order to customize the style for all cells within a column, you can attach a custom class name associated with the desired styles ...
.employees-cell {
width: 100%;
text-align: right;
}<TreeTable
value={treeValue}
onChange={handleOnChange}>
<TreeTable.Column
renderHeaderCell={() => <span>Name</span>}
// ⌄ used to render all cells corresponding to the "Name" column
renderCell={(row) => <span>{row.data.name}</span>}/>
<TreeTable.Column
renderHeaderCell={() => <span>Employees</span>}
// ⌄ used to render all cells corresponding to the "Employees" column
renderCell={(row) => <span className="employees-cell">{row.data.employees}</span>}/>
{/* ^ used to define custom styling for all non-header cells
*/} within the "Employees" column
...
</TreeTable>... or define the style definitions inline:
<TreeTable
value={treeValue}
onChange={handleOnChange}>
<TreeTable.Column
renderHeaderCell={() => <span>Name</span>}
// ⌄ used to render all cells corresponding to the "Name" column
renderCell={(row) => <span>{row.data.name}</span>}/>
<TreeTable.Column
renderHeaderCell={() => <span>Employees</span>}
// ⌄ used to render all cells corresponding to the "Employees" column
renderCell={(row) => <span style={{ width: "100%", textAlign: "right" }}>{row.data.employees}</span>}/>
{/* ^ used to define custom styling for all non-header cells
*/} within the "Employees" column
...
</TreeTable>_You can see examples of the above methods in the demos hosted on the documentation page (e.g: https://jsfiddle.net/constantin_p/hb8597sr)_
We have implemented the align-items: center to the .cp_tree-table_cell and also to the cp_tree-table_header-cell. But in the output I'm getting this values cells data misaligned. Can anyone guide me on this?