chakra-ui responsive table

table.ts

import { tableAnatomy } from "@chakra-ui/anatomy";
import { createMultiStyleConfigHelpers } from "@chakra-ui/react";

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(tableAnatomy.keys);

const baseStyle = definePartsStyle({
  table: {
    tableLayout: "fixed",
  },

  thead: {
    clip: { base: "rect(0 0 0 0)", md: "auto" },
    position: { base: "absolute", md: "static" },
    overflow: { base: "hidden", md: "auto" },
    width: { base: "1px", md: "auto" },
    height: { base: "1px", md: "auto" },
    padding: { base: 0, md: "auto" },
    margin: { base: "-1px", md: "auto" },
  },

  tr: {
    display: { base: "block", md: "table-row" },
    mb: { base: 4, md: 0 },
    borderBottom: { base: "3px solid", md: "none" },
    borderColor: { base: "gray.200", md: "transparent" },
  },

  td: {
    display: { base: "flex", md: "table-cell" },
    textAlign: { base: "right", md: "left" },
    justifyContent: { base: "space-between", md: "flex-start" },

    "&::before": {
      content: { base: "attr(data-label)", md: "none" },
      fontWeight: 600,
      float: "left",
      fontSize: "xs",
      textTransform: "uppercase",
    },
  },
});

export const tableTheme = defineMultiStyleConfig({ baseStyle });

theme.ts

import { extendTheme, theme, ThemeConfig } from "@chakra-ui/react";
import { tableTheme } from "./table";

export const appTheme = extendTheme({
  colors: { ...theme.colors },
  fonts: {},
  styles: {
    global: {},
  },
  components: {
    Table: tableTheme,
  },
  useSystemColorMode: false,
} as ThemeConfig);

Chakra-ui v3.3.1. Use props responsive on <Table.Root responsive striped>

import { defineConfig, createSystem, defaultConfig } from "@chakra-ui/react";
import { defineRecipe } from "@chakra-ui/react";

const customConfig = defineConfig({
  theme: {
    slotRecipes: {
      table: defineRecipe({
        variants: {
          responsive: {
            true: {
              header: {
                display: { base: "none", md: "table-header-group" },
              },
              body: {
                display: { base: "block", md: "table-row-group" },
              },
              row: {
                display: { base: "block", md: "table-row" },
                marginBottom: { base: "1rem", md: "0" },
              },
              cell: {
                display: { base: "block", md: "table-cell" },
                textAlign: { base: "right", md: "left" },
                position: { base: "relative", md: "static" },
                paddingLeft: { base: "50%", md: "0" },
                "&::before": {
                  content: { base: "attr(data-label)", md: '""' },
                  position: { base: "absolute", md: "static" },
                  left: { base: "0", md: "auto" },
                  width: { base: "50%", md: "auto" },
                  paddingLeft: { base: "1rem", md: "0" },
                  fontWeight: { base: "bold", md: "normal" },
                  textAlign: { base: "left", md: "inherit" },
                },
              },
            },
          },
        },
      }),
    },
    tokens: {
      // useSystemColorMode: false,
    },
  },
});

export const system = createSystem(defaultConfig, customConfig);

export default system;

chakra-ui v3 is much better imo.