Table

Component 20

About

This is table with filder and sorting

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Table to your project and fits it to your theme.

Code

How Table is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { BasicTable } from "@/components/ui/table";

export default function DemoOne() {
  const [dark, setDark] = React.useState(
    () => document.documentElement.classList.contains('dark') // initial read
  );

  React.useEffect(() => {
    // keep Tailwind dark class in sync
    document.documentElement.classList.toggle('dark', dark);
  }, [dark]);

  const theme = React.useMemo(
    () =>
      createTheme({
        palette: {
          mode: dark ? 'dark' : 'light',
        },
      }),
    [dark]
  );
  return <ThemeProvider theme={theme} className="w-full">
      <BasicTable />
    </ThemeProvider>
}