Adjustment to Table Component AutoHeight Parameter

[jjeroch]

Ticket Summary:

This ticket addresses an issue with the autoHeight parameter of the Table component which is not functioning as expected in Storybook.

Issue Description:

• The autoHeight parameter of the Table component documented at Table Component in Storybook is not operating correctly. The expected behavior is that the table adjusts its height automatically based on content, but this does not occur.

Tasks:

1. Investigate and Identify Cause:

   • Determine why the autoHeight parameter is not working as documented.

2. Code Adjustment:

   • Adjust the implementation of the autoHeight parameter to ensure it functions correctly.
   • Conduct thorough testing to validate the fix.

3. Impact Analysis:

   • Analyze the potential impact of this change on existing frontends utilizing the Table component.
   • Document the changes and their expected behavior for developers.

Acceptance Criteria:

• The autoHeight parameter must function as expected, allowing the Table component's height to automatically adjust based on its content.
• The solution should not negatively impact the current functionalities and design of the Table component in other aspects.

Implementation Notes:

• Ensure backward compatibility or provide a migration path for frontends currently using the autoHeight parameter.
• Update the Storybook documentation to reflect the corrected behavior of the autoHeight parameter.

Technical Details:

• Reference URL: Table Component Story

Communication Plan:

• Notify all frontend teams of the change and its potential impact.
• Clearly label the pull request with the "breaking" label to highlight the importance of the change.

[manojava-gk]

@jjeroch Fundamental understanding of autoheight seems wrong here. autoheight is not meant to handle the auto height of a row. If a table is wrapped in container and the height has to be dynamic, then autoheight helps to do so.

ex:

<Box sx={{ height: 100, width: "100%" }}>
      <DataGrid
        autoHeight={false}
       rows=[
{
    id: 1,
    lastName: "Snow",
    firstName: "Jon",
    age: 14
  },
  { id: 2, lastName: "Lannister", firstName: "Cersei", age: 31 },
  { id: 3, lastName: "Lannister", firstName: "Jaime", age: 31 },
  { id: 4, lastName: "Stark", firstName: "Arya", age: 11 },
  { id: 5, lastName: "Targaryen", firstName: "Daenerys", age: null },
  { id: 6, lastName: "Melisandre", firstName: null, age: 150 },
  { id: 7, lastName: "Clifford", firstName: "Ferrara", age: 44 },
  { id: 8, lastName: "Frances", firstName: "Rossini", age: 36 },
  { id: 9, lastName: "Roxie", firstName: "Harvey", age: 65 }]
 />
</Box>

<Box sx={{ height: 100, width: "100%" }}>
      <DataGrid
        autoHeight={true}
       rows=[
{
    id: 1,
    lastName: "Snow",
    firstName: "Jon",
    age: 14
  },
  { id: 2, lastName: "Lannister", firstName: "Cersei", age: 31 },
  { id: 3, lastName: "Lannister", firstName: "Jaime", age: 31 },
  { id: 4, lastName: "Stark", firstName: "Arya", age: 11 },
  { id: 5, lastName: "Targaryen", firstName: "Daenerys", age: null },
  { id: 6, lastName: "Melisandre", firstName: null, age: 150 },
  { id: 7, lastName: "Clifford", firstName: "Ferrara", age: 44 },
  { id: 8, lastName: "Frances", firstName: "Rossini", age: 36 },
  { id: 9, lastName: "Roxie", firstName: "Harvey", age: 65 }]
 />
</Box>

In the above example when autoheight is false UI screwed as the height is set to 100px. But when it changed to true height adjusted for the whole container