Blue highlight at the bottom of Data Grid

[nivedabala]

Hi! I'm having this problem with highlighting around the bottom of the Data Grid component. I noticed usually its around the whole table when something is selected but I'm not sure why it's only showing up at the bottom of the table here. This table is used to select one source and I have radio buttons in each row.

[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:

• Issue with DataGridHeaderSort (updated: 03/06/2023, similarity score: 84%)
• Clickable Rows in Data Grids (updated: 10/28/2022, similarity score: 84%)
• Showing error previews in a table - Answer (updated: 08/30/2022, similarity score: 84%)

[dosubot[bot]]

🤖

Hello @nivedabala! I'm Dosu, a helpful bot here to assist you with your bugs and queries, and guide you in becoming a contributor to Paste. While we wait for a human maintainer to join us, I'm here to help you. Let's get that Data Grid looking right!

Based on the information you've provided, it seems like the blue highlight at the bottom of the Data Grid component might be due to some custom styles or behaviors that are not part of the default implementation of the Data Grid in the Paste design system.

The Data Grid component in Paste is composed of several sub-components, including DataGrid, DataGridHead, DataGridBody, DataGridFoot, DataGridRow, DataGridCell, and DataGridHeader. These components are used to structure the data grid into sections and display individual data cells and header cells. However, there is no specific styling or behavior related to highlighting or selection in the default implementation of these components.

The radio buttons in your Data Grid rows might be implemented using the CheckboxCell component, which is a custom component not included in the Paste design system. This component uses a Checkbox component from Paste and wraps it in a Box component to center it within the cell. The onClick function for the CheckboxCell component is used to update the checked state of the checkbox in the data grid's state.

If the blue highlight is related to the selection of a row or a cell in the data grid, it might be due to some custom behavior implemented in the onClick function of the CheckboxCell component or some other part of your code.

To help you further, could you please provide more details about your implementation? Specifically, it would be helpful to know:

• How are you implementing the radio buttons in the Data Grid rows? Are you using the CheckboxCell component or something else?
• Are you applying any custom styles or behaviors to the Data Grid or its sub-components?
• Can you provide the code for the onClick function that you're using to handle the selection of a row or a cell in the Data Grid?

This information will help me understand better what might be causing the blue highlight at the bottom of the Data Grid.

You can refer to the Data Grid component documentation and the source code for more information about the default implementation and styling of the Data Grid in the Paste design system.

Looking forward to your response!

Best,
Dosu

Sources

• packages/paste-core/components/data-grid/stories/components/DataGridLayouts.tsx
• packages/paste-core/components/data-grid/tests/customization.spec.tsx
• packages/paste-core/components/data-grid/stories/components/KitchenSinkDataGrid.tsx

---

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.

[nivedabala]

@dosu-bot

<DataGridRow key={row-${rowIndex}-${source.id}`} selected={selectedSource && selectedSource.id === source.id}>


<Box
as="img"
alt="source logo"
src={source.metadata.logos.default ?? ''}
maxWidth="24px"
maxHeight="24px"
marginRight="space60"
/>

                  {source.name}
                </Box>
                <Radio
                  checked={selectedSource && selectedSource.id === source.id}
                  id={source.id}
                  value={source.id}
                  name="source"
                  onChange={() => onSelectSource(source)}
                >
                  {''}
                </Radio>
              </Box>
            </DataGridCell>
          </DataGridRow>`

[dosubot[bot]]

🤖

It looks like you've provided a snippet of code related to a DataGridRow and DataGridCell component. It seems to be a part of a larger component that includes an image, source name, and a radio button for selection.

Is there something specific you'd like to discuss or ask about this code snippet? Whether it's related to functionality, best practices, or anything else, feel free to let me know how I can assist you!

---

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.

[TheSisb]

Hi @nivedabala,

Our DataGrid component has a full grid highlight when it is in "Actionable" mode

I'm not quite sure why the highlight is getting cropped on the top and either side... Can you create a minimal repro in Codesandbox please?

[nivedabala]

I was actually able to fix it so that the whole table highlights when there is a selection once I removed overflow="autoscroll" from the Box component surrounding the DataGrid!

[TheSisb]

Glad to hear it! Thanks for reporting back with your fix!