Striped style not working in Table Component

[fabiantorress]

Hi, I am trying to style my table using the striped property but nothing change in my table. I do not if I have to add some dependency or Theme.Provider to achieve this? I tried using this nothing change:

    flex.setProviders({
      PasteThemeProvider: CustomizationProvider
    });

I am using Twilio Flex version 2.6.1.
If anyone have experience with Table Component, I will be very grateful. Thanks in advance.

[dosubot[bot]]

Hello @fabiantorress! 👋 I'm Dosu, a bot here to lend a hand with bugs, answer questions, and guide you on becoming a contributor while we wait for a human maintainer to arrive. I'm diving into your issue regarding the striped style in the Table Component and will get back to you shortly with more information. 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:

• CustomizationProvider and available baseTheme properties (updated: 12/07/2023, similarity score: 83%)
• How to pass a custom theme to CustomizationProvider within Flex.setProviders (updated: 10/25/2022, similarity score: 83%)
• Reduce padding in Paste Tables - Answer (updated: 09/20/2023, similarity score: 83%)

[dosubot[bot]]

To apply the striped style to your Table Component in the Paste design system, you need to ensure that the striped prop is set to true when you use the Table component. However, from the provided code snippet, it appears that the striped prop is being passed down to the TableContext but not being used to conditionally apply any styles directly within the Table component itself.

To make the striped style visible, you would typically need to apply conditional styling based on the striped value from the context within your component's render method. Since the provided code does not include the implementation details of how the styles are applied based on the striped prop, you might need to extend the component to include this functionality.

Here's a conceptual example of how you might implement striped styling within the Table component, assuming you're using styled-components or a similar CSS-in-JS library for styling:

import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
import * as React from "react";
import styled from "styled-components";

import { TableContext } from "./TableContext";
import type { TableProps } from "./types";

const StripedTable = styled(Box)<{ striped: boolean }>`
  & tr:nth-of-type(odd) {
    background-color: ${({ striped, theme }) => striped ? theme.backgroundColors.colorBackgroundRowStriped : "transparent"};
  }
`;

const Table = React.forwardRef<HTMLTableElement, TableProps>(
  (
    {
      element = "TABLE",
      id,
      isActionable,
      scrollHorizontally,
      noWrap,
      striped = false,
      tableLayout = "auto",
      variant = "default",
      ...props
    },
    ref,
  ) => {
    const tableContext = {
      striped,
    };

    return (
      <TableContext.Provider value={tableContext}>
        <Box
          id={id}
          element={`${element}_WRAPPER`}
          overflowX={scrollHorizontally ? "auto" : null}
          whiteSpace={noWrap ? "nowrap" : null}
          boxShadow={isActionable ? "shadowFocus" : null}
        >
          <StripedTable
            {...safelySpreadBoxProps(props)}
            ref={ref}
            as="table"
            borderCollapse="separate"
            borderColor="colorBorderWeaker"
            borderSpacing="0"
            borderStyle="solid"
            borderWidth={variant === "borderless" ? "borderWidth0" : "borderWidth10"}
            element={element}
            tableLayout={tableLayout === "fixed" ? "fixed" : "auto"}
            width="100%"
            striped={striped}
          />
        </Box>
      </TableContext.Provider>
    );
  },
);

Table.displayName = "Table";

export { Table };

In this example, a StripedTable styled component is created with conditional styling for striped rows. The striped prop is passed to this component to determine if the striped style should be applied. Please note that you'll need to adjust the theme.backgroundColors.colorBackgroundRowStriped to match the actual theme color variable in your project.

Remember, this is a conceptual example. You might need to adjust it based on your project's setup and the actual implementation of the Paste design system components you're using.

For more information, you can refer to the Table component source code in the Paste repository.

Sources

• packages/paste-core/components/table/src/Table.tsx
• packages/paste-core/components/table/tests/index.spec.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 - it's hard to debug without seeing your whole file. Can you either copy/paste or somehow share a repro so I can take a look?

When using the Customization Provider, be sure you're passing a baseTheme so that your app has access to the default styles.