Re: [PR] fix: Improve table layout and column sizing for better user experience [superset]

[via GitHub]

korbit-ai[bot] commented on code in PR #34887:
URL: https://github.com/apache/superset/pull/34887#discussion_r2307725572


##########
superset-frontend/packages/superset-ui-core/src/components/TableCollection/utils.tsx:
##########
@@ -95,7 +95,7 @@ export function mapColumns<T extends object>(
       dataIndex: column.id?.includes('.') ? column.id.split('.') : column.id,
       hidden: column.hidden,
       key: column.id,
-      width: column.size ? COLUMN_SIZE_MAP[column.size] : COLUMN_SIZE_MAP.md,
+      width: column.size ? COLUMN_SIZE_MAP[column.size] : undefined,

Review Comment:
   ### Inconsistent Column Width Behavior <sub>![category 
Functionality](https://img.shields.io/badge/Functionality-0284c7)</sub>
   
   <details>
     <summary>Tell me more</summary>
   
   ###### What is the issue?
   Removing default column width (COLUMN_SIZE_MAP.md) in favor of undefined 
might cause inconsistent column sizing behavior across different table 
instances.
   
   
   ###### Why this matters
   Tables without explicitly set column sizes may display erratically or 
inconsistently depending on content, leading to poor user experience in cases 
where consistent column widths are expected.
   
   ###### Suggested change ∙ *Feature Preview*
   Consider maintaining a default width or implementing a minimum width to 
ensure consistent table appearance:
   
   ```typescript
   width: column.size ? COLUMN_SIZE_MAP[column.size] : COLUMN_SIZE_MAP.sm,
   ```
   
   or
   
   ```typescript
   width: column.size ? COLUMN_SIZE_MAP[column.size] : undefined,
   minWidth: COLUMN_SIZE_MAP.sm,
   ```
   
   
   ###### Provide feedback to improve future suggestions
   [![Nice 
Catch](https://img.shields.io/badge/👍%20Nice%20Catch-71BC78)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/5283b94e-0433-4247-855c-a3312ba487ef/upvote)
 
[![Incorrect](https://img.shields.io/badge/👎%20Incorrect-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/5283b94e-0433-4247-855c-a3312ba487ef?what_not_true=true)
  [![Not in 
Scope](https://img.shields.io/badge/👎%20Out%20of%20PR%20scope-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/5283b94e-0433-4247-855c-a3312ba487ef?what_out_of_scope=true)
 [![Not in coding 
standard](https://img.shields.io/badge/👎%20Not%20in%20our%20standards-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/5283b94e-0433-4247-855c-a3312ba487ef?what_not_in_standard=true)
 
[![Other](https://img.shields.io/badge/👎%20Other-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/5283b94e-0433-4247-855c-a3312ba487ef)
   </details>
   
   <sub>
   
   💬 Looking for more details? Reply to this comment to chat with Korbit.
   </sub>
   
   <!--- korbi internal id:9ded677b-c263-4467-95ec-bf59e8674700 -->
   
   
   [](9ded677b-c263-4467-95ec-bf59e8674700)



##########
superset-frontend/packages/superset-ui-core/src/components/TableCollection/index.tsx:
##########
@@ -82,6 +82,7 @@ const StyledTable = styled(Table)`
       }
     }
     .ant-table-cell {
+      max-width: 320px;

Review Comment:
   ### Fixed cell width may truncate important content <sub>![category 
Functionality](https://img.shields.io/badge/Functionality-0284c7)</sub>
   
   <details>
     <summary>Tell me more</summary>
   
   ###### What is the issue?
   Hard-coded maximum width of 320px for table cells could truncate important 
information that requires more space to be displayed properly.
   
   
   ###### Why this matters
   Users may miss critical data or context due to content being cut off, 
particularly in cases where the cell content legitimately needs more than 320px 
to display properly.
   
   ###### Suggested change ∙ *Feature Preview*
   Consider making the max-width configurable through props or using a relative 
unit:
   ```typescript
   // Add to TableCollectionProps interface
   cellMaxWidth?: string | number;
   
   // In the styled component
   .ant-table-cell {
     max-width: ${props => props.cellMaxWidth || '320px'};
     ...
   }
   ```
   
   
   ###### Provide feedback to improve future suggestions
   [![Nice 
Catch](https://img.shields.io/badge/👍%20Nice%20Catch-71BC78)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/901de3ff-f250-4a7e-afe5-c717d80941ae/upvote)
 
[![Incorrect](https://img.shields.io/badge/👎%20Incorrect-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/901de3ff-f250-4a7e-afe5-c717d80941ae?what_not_true=true)
  [![Not in 
Scope](https://img.shields.io/badge/👎%20Out%20of%20PR%20scope-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/901de3ff-f250-4a7e-afe5-c717d80941ae?what_out_of_scope=true)
 [![Not in coding 
standard](https://img.shields.io/badge/👎%20Not%20in%20our%20standards-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/901de3ff-f250-4a7e-afe5-c717d80941ae?what_not_in_standard=true)
 
[![Other](https://img.shields.io/badge/👎%20Other-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/901de3ff-f250-4a7e-afe5-c717d80941ae)
   </details>
   
   <sub>
   
   💬 Looking for more details? Reply to this comment to chat with Korbit.
   </sub>
   
   <!--- korbi internal id:43ff053d-623a-477d-8dac-279fc09e6614 -->
   
   
   [](43ff053d-623a-477d-8dac-279fc09e6614)



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org
For additional commands, e-mail: notifications-h...@superset.apache.org