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);