You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The OuiDataGrid component from the OUI framework implements rowHeightsOptions to enable adjustable row heights, particularly for handling multiline cell content. This functionality is achieved through a combination of React components and utility classes. Here's a breakdown of how it works:
Related Classes and Components
RowHeightUtils Class
Purpose: This utility class is crucial for calculating row heights based on various criteria like line count, padding, line height, etc.
Key Methods:
computeStylesForGridCell(gridStyles): Determines the styles for grid cells. It uses a fake cell, applies styles, and appends it to the document to compute the effective styles (padding, line height).
calculateHeightForLineCount(lineCount): Calculates the height of a cell based on the number of lines it should display.
getCalculatedHeight(heightOption, defaultHeight): Determines the calculated height of a row based on the provided height option (could be a line count or specific height) and a default height.
OuiDataGrid Component
Usage of RowHeightUtils: The grid component imports and uses RowHeightUtils. It calls computeStylesForGridCell to initialize the styles based on the grid's current styles.
Passing Props to Child Components: The OuiDataGrid passes rowHeightUtils, rowHeightsOptions, and gridStyles to the OuiDataGridBody.
OuiDataGridBody Component
Handling Row Heights: This component is responsible for rendering the grid rows. It uses getRowHeight (a method that utilizes RowHeightUtils) to determine the height of each row.
Adjusting Heights: The grid rows' heights are adjusted dynamically based on the rowHeightsOptions passed to the component.
OuiDataGridCell Component
Dynamic Update: The cell component decides whether to update based on changes in its style and height. If the height changes, it triggers a re-render to adjust to the new height.
Rendering Content: The OuiDataGridCellContent component, used within OuiDataGridCell, renders the actual cell content. It applies styles calculated for the row height, controlling how content is displayed (e.g., number of lines, overflow handling).
OuiDataGridCellContent Component
Styling Cells: This component applies styles based on rowHeightsOptions and the row index. It handles how the content is displayed within the cell, including truncation and line clamping for multiline content.
Overall Flow
Initialization: OuiDataGrid initializes RowHeightUtils with the current grid styles.
Passing Down Props: rowHeightUtils, rowHeightsOptions, and gridStyles are passed down to OuiDataGridBody.
Row Height Calculation: OuiDataGridBody uses these utilities to calculate and adjust row heights.
Cell Rendering: OuiDataGridCell responds to changes in styles or heights and re-renders if necessary.
Content Display: OuiDataGridCellContent applies the appropriate styles for displaying the cell content based on the row height settings.
The text was updated successfully, but these errors were encountered:
The OuiDataGrid component from the OUI framework implements
rowHeightsOptions
to enable adjustable row heights, particularly for handling multiline cell content. This functionality is achieved through a combination of React components and utility classes. Here's a breakdown of how it works:Related Classes and Components
RowHeightUtils Class
Purpose: This utility class is crucial for calculating row heights based on various criteria like line count, padding, line height, etc.
Key Methods:
computeStylesForGridCell(gridStyles)
: Determines the styles for grid cells. It uses a fake cell, applies styles, and appends it to the document to compute the effective styles (padding, line height).calculateHeightForLineCount(lineCount)
: Calculates the height of a cell based on the number of lines it should display.getCalculatedHeight(heightOption, defaultHeight)
: Determines the calculated height of a row based on the provided height option (could be a line count or specific height) and a default height.OuiDataGrid Component
RowHeightUtils
: The grid component imports and usesRowHeightUtils
. It callscomputeStylesForGridCell
to initialize the styles based on the grid's current styles.rowHeightUtils
,rowHeightsOptions
, andgridStyles
to the OuiDataGridBody.OuiDataGridBody Component
getRowHeight
(a method that utilizes RowHeightUtils) to determine the height of each row.rowHeightsOptions
passed to the component.OuiDataGridCell Component
OuiDataGridCellContent
component, used withinOuiDataGridCell
, renders the actual cell content. It applies styles calculated for the row height, controlling how content is displayed (e.g., number of lines, overflow handling).OuiDataGridCellContent Component
Overall Flow
The text was updated successfully, but these errors were encountered: