Example from https://react-md.dev/packages/table/demos#default-styles-configurable

Table Example - Default Styles Configurable

<!DOCTYPE html>
<html lang="en" class="light-theme">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Material+Icons|Roboto:400,500,700|Source+Code+Pro"
    />
    
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/mlaursen/react-md@5.1.6/themes/react-md.teal-pink-200-light.min.css"
    />
    <title>Table Example - Default Styles Configurable</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

import type { ReactElement } from "react";

import { Provider, useStylesState } from "./context";
import StyledTable from "./StyledTable";
import TableConfiguration from "./TableConfiguration";

export default function Demo(): ReactElement {
  const value = useStylesState();

  return (
    <Provider value={value}>
      <TableConfiguration />
      <StyledTable />
    </Provider>
  );
}


.container {
  max-height: 30rem;
}

.table {
  margin-top: 2rem;
}

.cell:nth-child(2) {
  max-width: 10rem;
}


import type { ReactElement } from "react";
import type {
  TableCellConfiguration,
  TableRowConfiguration,
} from "@react-md/table";
import {
  Caption,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHeader,
  TableRow,
} from "@react-md/table";

import { useDefaultStylesContext } from "./context";
import styles from "./StyledTable.module.scss";

interface ContainerProps {
  container: boolean;
  children: ReactElement;
}

type RowProps = Required<TableRowConfiguration> | undefined;
type CellProps = Required<TableCellConfiguration> | undefined;

function Container({ container, children }: ContainerProps): ReactElement {
  if (!container) {
    return children;
  }

  return (
    <TableContainer className={styles.container}>{children}</TableContainer>
  );
}

export default function StyledTable(): ReactElement {
  const {
    rows,
    cols,
    container,
    row2DisableHover,
    row2DisableBorders,
    col2Grow,
    cellHAlign,
    cellVAlign,
    cellLineWrap,
    onInputChange: _onInputChange,
    onNumberChange: _onNumberChange,
    onSelectChange: _onSelectChange,
    ...props
  } = useDefaultStylesContext();

  const getRowProps = (rowIndex: number): RowProps => {
    if (rowIndex !== 1) {
      return undefined;
    }

    return {
      disableHover: row2DisableHover,
      disableBorders: row2DisableBorders,
    };
  };

  const getCellProps = (rowIndex: number, colIndex: number): CellProps => {
    if (rowIndex !== 0 || colIndex !== 1) {
      return undefined;
    }

    return {
      hAlign: cellHAlign,
      vAlign: cellVAlign,
      lineWrap: cellLineWrap,
    };
  };

  return (
    <Container container={container}>
      <Table {...props} className={styles.table}>
        <Caption>Configured Table</Caption>
        <TableHeader>
          <TableRow>
            {Array.from({ length: cols }, (_, colIndex) => (
              <TableCell key={colIndex} grow={col2Grow && colIndex === 1}>
                {`Header ${colIndex + 1}`}
              </TableCell>
            ))}
          </TableRow>
        </TableHeader>
        <TableBody>
          {Array.from({ length: rows }, (_, rowIndex) => (
            <TableRow key={rowIndex} {...getRowProps(rowIndex)}>
              {Array.from({ length: cols }, (_, colIndex) => (
                <TableCell
                  key={colIndex}
                  className={styles.cell}
                  {...getCellProps(rowIndex, colIndex)}
                >
                  {`Cell ${rowIndex + 1}-${colIndex + 1}`}
                  {colIndex === 1 && " - This is some additional text."}
                </TableCell>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Container>
  );
}


.right {
  align-self: flex-start;
  margin-top: 2rem;
}


import type { ReactElement } from "react";
import { Checkbox, Fieldset, Select, TextField } from "@react-md/form";
import type {
  TableCellHorizontalAlignment,
  TableCellVerticalAlignment,
} from "@react-md/table";
import { Grid } from "@react-md/utils";

import { useDefaultStylesContext } from "./context";
import styles from "./TableConfiguration.module.scss";

const horizontals: TableCellHorizontalAlignment[] = ["left", "center", "right"];
const verticals: TableCellVerticalAlignment[] = ["top", "middle", "bottom"];
const lineWrapping = ["true", "false", "padded"];

export default function TableConfiguration(): ReactElement {
  const {
    cols,
    rows,
    dense,
    fullWidth,
    container,
    lineWrap,
    disableHover,
    disableBorders,
    hAlign,
    vAlign,
    row2DisableHover,
    row2DisableBorders,
    col2Grow,
    cellHAlign,
    cellVAlign,
    cellLineWrap,
    onInputChange,
    onNumberChange,
    onSelectChange,
  } = useDefaultStylesContext();

  return (
    <Grid columns={1} largeDesktopColumns={2}>
      <Fieldset legend="Root Table Options">
        <Checkbox
          id="table-grow-col-2"
          name="col2Grow"
          label="Apply grow to column 2"
          checked={col2Grow}
          onChange={onInputChange}
        />
        <Checkbox
          id="table-dense"
          name="dense"
          label="Dense"
          checked={dense}
          onChange={onInputChange}
        />
        <Checkbox
          id="table-full-width"
          name="fullWidth"
          label="Full Width"
          checked={fullWidth}
          onChange={onInputChange}
        />
        <Checkbox
          id="table-container"
          name="container"
          label="Use Container"
          checked={container}
          onChange={onInputChange}
        />
        <Checkbox
          id="table-disable-hover"
          name="disableHover"
          label="Disable Row Hover"
          checked={disableHover}
          onChange={onInputChange}
        />
        <Checkbox
          id="table-disable-borders"
          name="disableBorders"
          label="Disable Row Borders"
          checked={disableBorders}
          onChange={onInputChange}
        />
      </Fieldset>
      <Grid columns={2} phoneColumns={1} padding={0} className={styles.right}>
        <TextField
          id="table-cols"
          name="cols"
          type="number"
          label="Columns"
          theme="underline"
          min={2}
          max={20}
          value={`${cols}`}
          onChange={onNumberChange}
        />
        <TextField
          id="table-rows"
          name="rows"
          type="number"
          label="Rows"
          theme="underline"
          min={3}
          max={30}
          value={`${rows}`}
          onChange={onNumberChange}
        />
        <Select
          id="table-h-align"
          name="hAlign"
          label="Horizontal alignment"
          options={horizontals}
          value={hAlign}
          onChange={onSelectChange}
        />
        <Select
          id="table-v-align"
          name="vAlign"
          label="Vertical alignment"
          options={verticals}
          value={vAlign}
          onChange={onSelectChange}
        />
        <Select
          id="table-line-wrap"
          name="lineWrap"
          label="Line wrap"
          options={lineWrapping}
          value={`${lineWrap}`}
          onChange={onSelectChange}
        />
      </Grid>
      <Fieldset legend="Row 2 Options">
        <Checkbox
          id="table-row-2-disable-hover"
          name="row2DisableHover"
          label="Disable Hover"
          checked={row2DisableHover}
          onChange={onInputChange}
        />
        <Checkbox
          id="table-row-2-disable-borders"
          name="row2DisableBorders"
          label="Disable Borders"
          checked={row2DisableBorders}
          onChange={onInputChange}
        />
      </Fieldset>
      <Fieldset legend="Cell 1-2 Options">
        <Grid columns={2} phoneColumns={1} padding={0} className={styles.right}>
          <Select
            id="table-cell-h-align"
            name="cellHAlign"
            label="Horizontal alignment"
            options={horizontals}
            value={cellHAlign}
            onChange={onSelectChange}
          />
          <Select
            id="table-cell-v-align"
            name="cellVAlign"
            label="Vertical alignment"
            options={verticals}
            value={cellVAlign}
            onChange={onSelectChange}
          />
          <Select
            id="table-cell-line-wrap"
            name="cellLineWrap"
            label="Line wrap"
            options={lineWrapping}
            value={`${cellLineWrap}`}
            onChange={onSelectChange}
          />
        </Grid>
      </Fieldset>
    </Grid>
  );
}


@use "@react-md/theme/dist/color-palette" as *;
// Note: Outside of codesandbox, this can be `@forward "react-md" with (`
@forward "react-md/dist/everything" with (
  $rmd-theme-light: true,
  $rmd-theme-primary: $rmd-teal-500,
  $rmd-theme-secondary: $rmd-pink-a-200,
);


import {
  createContext,
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useState,
} from "react";
import type { ListboxChangeEventHandler } from "@react-md/form";
import type {
  TableCellConfiguration,
  TableCellHorizontalAlignment,
  TableCellVerticalAlignment,
  TableConfiguration,
} from "@react-md/table";
import { useAppSize } from "@react-md/utils";

type LineWrap = Required<TableCellConfiguration>["lineWrap"];

export interface DefaultStylesContext extends Required<TableConfiguration> {
  cols: number;
  rows: number;
  container: boolean;
  row2DisableHover: boolean;
  row2DisableBorders: false;
  col2Grow: boolean;
  cellHAlign: TableCellHorizontalAlignment;
  cellVAlign: TableCellVerticalAlignment;
  cellLineWrap: LineWrap;
  onInputChange: React.ChangeEventHandler<HTMLInputElement>;
  onSelectChange: ListboxChangeEventHandler;
  onNumberChange: React.ChangeEventHandler<HTMLInputElement>;
}

const defaultState: Omit<
  DefaultStylesContext,
  "onInputChange" | "onSelectChange" | "onNumberChange"
> = {
  cols: 3,
  rows: 5,
  dense: false,
  fullWidth: false,
  container: false,
  disableHover: false,
  disableBorders: false,
  hAlign: "left",
  vAlign: "middle",
  lineWrap: false,
  row2DisableHover: false,
  row2DisableBorders: false,
  col2Grow: false,
  cellHAlign: "left",
  cellVAlign: "middle",
  cellLineWrap: false,
};

/**
 * You should probably define forms in a much better way, so I wouldn't
 * recommend following this pattern at all. I mostly wanted to separate
 * the configuration state/logic from the Table components to keep the
 * example simple at first glance and show what different props accomplish.
 */
export function useStylesState(): DefaultStylesContext {
  const { isPhone } = useAppSize();
  const [state, setState] = useState({
    ...defaultState,
    // need to force the container on mobile so that Google doesn't complain
    // that my website isn't mobile friendly with horizontal scrolling
    container: !isPhone,
  });

  useEffect(() => {
    if (isPhone) {
      setState((prevState) => {
        if (prevState.container) {
          return prevState;
        }

        return { ...prevState, container: true };
      });
    }
  }, [isPhone]);

  /* eslint-disable no-console */
  const onInputChange = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      const { name, checked } = event.currentTarget;
      setState((prevState) => {
        if (name in prevState) {
          return {
            ...prevState,
            [name]: checked,
          };
        }

        if (process.env.NODE_ENV !== "production") {
          console.log(`Unknown form input with name: "${name}"`);
        }

        return prevState;
      });
    },
    []
  );

  const onNumberChange = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      const { name, value } = event.currentTarget;
      const min = parseInt(event.currentTarget.min, 10);
      const max = parseInt(event.currentTarget.max, 10);
      setState((prevState) => {
        if (name in prevState) {
          const number = parseInt(value, 10);
          // happens if the user types a letter instead of a number
          if (Number.isNaN(number)) {
            return prevState;
          }

          return {
            ...prevState,
            [name]: Math.min(max, Math.max(min, number)),
          };
        }

        if (process.env.NODE_ENV !== "production") {
          console.log(`Unknown form input with name: "${name}"`);
        }

        return prevState;
      });
    },
    []
  );

  const onSelectChange = useCallback<ListboxChangeEventHandler>(
    (nextValue, _option, listbox) => {
      const { name = "" } = listbox;
      setState((prevState) => {
        if (name in prevState) {
          let value: string | boolean = nextValue;
          if (/linewrap/i.test(name)) {
            /* eslint-disable no-nested-ternary */
            value =
              nextValue === "true"
                ? true
                : nextValue === "false"
                ? false
                : nextValue;
          }

          return {
            ...prevState,
            [name]: value,
          };
        }

        if (process.env.NODE_ENV !== "production") {
          console.log(`Unknown form input with name: "${name}"`);
        }

        return prevState;
      });
    },
    []
  );

  return useMemo(
    () => ({
      ...state,
      onInputChange,
      onNumberChange,
      onSelectChange,
    }),
    [state, onInputChange, onNumberChange, onSelectChange]
  );
}

const context = createContext<DefaultStylesContext>({
  ...defaultState,
  onInputChange() {
    throw new Error("Provider not mounted");
  },
  onNumberChange() {
    throw new Error("Provider not mounted");
  },
  onSelectChange() {
    throw new Error("Provider not mounted");
  },
});

export const { Provider } = context;

export const useDefaultStylesContext = (): DefaultStylesContext =>
  useContext(context);


import { render } from "react-dom";
import { Configuration } from "@react-md/layout";

// the styles are actually loaded as the pre-compiled themes in the index.html
// to speed up sandbox compilation. If you want to update the theme, you'll need
// to uncomment this line and remove the `<link>` tag in the `index.html`
// import "./styles.scss"

import Demo from "./Demo";

const App = () => (
  <Configuration>
    <Demo />
  </Configuration>
);

render(<App />, document.getElementById("root"));


@use "./everything" as *;

@include react-md-utils;
