Set maxHeight for Data Grip?

[fabiantorress]

Hi, I am using DataGrip to display a table in Twilio Flex but I am not finding a way to set the maxHeight. A workaround that I found is wrapping the DataGrid with Box container but if I do that the stickyHeader of the Data Grip does not work. This is my code:

      <Box
        padding="space20"
        margin="space20"
        display="flex"
        flexDirection="column"
        maxWidth="size40"
        minHeight="size20"
        maxHeight="size20"
      >
        <DataGrid aria-label="User information table" striped scrollHorizontally>
          <DataGridHead stickyHeader>
            <DataGridRow>
              <DataGridHeader>First Name</DataGridHeader>
              <DataGridHeader>Last Name</DataGridHeader>
              <DataGridHeader>Country</DataGridHeader>
              <DataGridHeader>Email</DataGridHeader>
              <DataGridHeader>Phone</DataGridHeader>
            </DataGridRow>
          </DataGridHead>
          <DataGridBody>
            <DataGridRow>
              <DataGridCell>Devyn</DataGridCell>
              <DataGridCell>Weimann</DataGridCell>
              <DataGridCell>Congo</DataGridCell>
              <DataGridCell>[email protected]</DataGridCell>
              <DataGridCell>652-441-1766 x377</DataGridCell>
            </DataGridRow>
            <DataGridRow>
              <DataGridCell>Fritz</DataGridCell>
              <DataGridCell>Bashirian</DataGridCell>
              <DataGridCell>France</DataGridCell>
              <DataGridCell>[email protected]</DataGridCell>
              <DataGridCell>1-229-278-7567</DataGridCell>
            </DataGridRow>
            <DataGridRow>
              <DataGridCell>Jovanny</DataGridCell>
              <DataGridCell>Mante</DataGridCell>
              <DataGridCell>Pitcairn Islands</DataGridCell>
              <DataGridCell>[email protected]</DataGridCell>
              <DataGridCell>(629) 375-5743 x726</DataGridCell>
            </DataGridRow>
            <DataGridRow>
              <DataGridCell>Juan</DataGridCell>
              <DataGridCell>Perez</DataGridCell>
              <DataGridCell>Maldives Islands</DataGridCell>
              <DataGridCell>[email protected]</DataGridCell>
              <DataGridCell>(595) 983-5743 x726</DataGridCell>
            </DataGridRow>
          </DataGridBody>
          <DataGridFoot>
            <DataGridRow>
              <DataGridCell>Devyn</DataGridCell>
              <DataGridCell>Weimann</DataGridCell>
              <DataGridCell>Congo</DataGridCell>
              <DataGridCell>[email protected]</DataGridCell>
              <DataGridCell>652-441-1766 x377</DataGridCell>
            </DataGridRow>
          </DataGridFoot>
        </DataGrid>
      </Box>

[dosubot[bot]]

Hey there @fabiantorress! 😊 Great to see you back. I remember our last adventure through code-land together. I'm diving into your DataGrid dilemma now and will circle back with a full answer shortly. Hang tight!

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Column wrapping in Data Grid? (updated: 06/28/2022, similarity score: 83%)
• Guidance on vertical grid spacing (updated: 06/28/2022, similarity score: 83%)
• Datagrid - text align (updated: 06/14/2022, similarity score: 83%)

[dosubot[bot]]

Based on the information provided, it seems that the maxHeight property is not directly configurable on the DataGrid component in the Paste design system. However, you can apply the maxHeight style directly to the DataGrid component using the style prop. This approach ensures that the DataGrid itself has a maximum height constraint, allowing the stickyHeader to function correctly within the confines of the DataGrid's scrollable area.

Here's how you can modify your DataGrid component to include a maxHeight:

<DataGrid
  aria-label="User information table"
  striped
  scrollHorizontally
  style={{ maxHeight: '500px', overflowY: 'auto' }} // Set maxHeight here and enable vertical scrolling
>
  {/* Your DataGridHead, DataGridBody, and DataGridFoot components */}
</DataGrid>

In this modification, the style prop is added directly to the DataGrid component with a maxHeight value of 500px and overflowY: 'auto' to enable vertical scrolling. This setup maintains the stickyHeader functionality, as the header will stick to the top of the DataGrid component when the user scrolls through the data rows.

Please note that this solution involves inline styling, which might not be the best practice in all cases. It's recommended to use the Paste design system's built-in styling properties whenever possible. However, in this case, it seems necessary to use inline styling to achieve the desired functionality.

If you have further questions or need more assistance, feel free to ask.

Sources

• packages/paste-core/components/data-grid/stories/components/StickyHeaderDataGrid.tsx

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[nkrantz]

Hey @fabiantorress - can you share a reproduction of the sticky header not working in a CodeSandbox? When I try your pasted code, the sticky header works for me.

[fabiantorress]

Hi @nkrantz, I found the problem. When I created my custom plugin using the command "twilio flex:plugins:create name-of-plugin --install --flexui2" as suggested by the Twilio Flex documentation, it added an old version of Twilio Paste to the package.json. Removing the dependency and using the Twilio Paste that comes with the plugin solved my issue (without specifying a version of Twilio Paste inside the package.json).