Table

The Table component is a structured way to display data in rows and columns, with support for various styles and features.

Basic Usage

import { Table, ThemeProvider } from "@carton-org/react-neumorphism";

interface User {
  name: string;
  age: number;
  email: string;
}

const MyComponent = () => {
  const columns = ["Name", "Age", "Email"];

  const users: User[] = [
    { name: "John Doe", age: 30, email: "[email protected]" },
    { name: "Jane Smith", age: 25, email: "[email protected]" },
  ];

  return <Table<User> columns={columns} data={data} />;
};

Live Example

name	age	email
John Doe	30	[email protected]
Jane Smith	25	[email protected]

Props

Name	Type	Description	Required	Default Value
columns	Array<string>	Array of column definitions with headers and data accessors	Yes	-
data	Array<T>	Array of data objects to display in the table	Yes	-
size	"xs" | "sm" | "md" | "lg" | "xl"	Size of the table cells	No	"sm"
inset	boolean	Whether to apply inset styling to the table	No	true
tableStyle	React.CSSProperties	Custom styles for the table container	No	-
tableColumnLabelStyle	React.CSSProperties	Custom styles for the table column headers	No	-
tableRowValueStyle	React.CSSProperties	Custom styles for the table row values	No	-