Table Component

The Table component provides a fully responsive and highly customizable data table system. Optimized for dark mode, with inline styles, className overrides, and flexible structure using head, body, rows, and cells.

Import Component From Library

javascript

1import { Table, THead, TBody, TRow, TH, TD } from "@neuctra/ui";

Basic Usage Code

Start with a simple table. The component provides responsive and customizable data tables with striped rows, borders, and styling.

tsx

1import { Table, THead, TBody, TRow, TH, TD } from '@neuctra/ui';
2
3function BasicExample() {
4  return (
5    <Table striped bordered>
6      <THead>
7        <TRow>
8          <TH>Name</TH>
9          <TH>Email</TH>
10        </TRow>
11      </THead>
12      <TBody>
13        <TRow>
14          <TD>John Doe</TD>
15          <TD>[email protected]</TD>
16        </TRow>
17        <TRow>
18          <TD>Jane Smith</TD>
19          <TD>[email protected]</TD>
20        </TRow>
21      </TBody>
22    </Table>
23  );
24}

Basic Example

Name	Email
John	[email protected]
Ali Khan	[email protected]
Ahmed Raza	[email protected]

Responsive Table

Product	Category	Price	Stock	Status	Rating
MacBook Pro	Laptop	$2000	12	Available	4.8
iPhone 15	Mobile	$1200	30	Available	4.7
AirPods Pro	Accessories	$250	50	In Stock	4.6
iPad Air	Tablet	$900	8	Limited	4.5

Custom Styling

Name	Role	Status
Sarah	Developer	Active
Mike	Designer	Active

Props Reference

Table

Prop	Type	Default	Description
responsive	boolean	true	Enable horizontal scrolling on narrow screens.
striped	boolean	false	Alternate row backgrounds in the body.
hoverable	boolean	true	Apply hover state styling to rows.
bordered	boolean	false	Add row border separators.
dense	boolean	false	Use smaller cell padding for compact layouts.
className	string	—	Custom wrapper container classes.
style	CSSProperties	—	Custom wrapper inline styles.
tableClassName	string	—	Custom class for the inner `table` element.
tableStyle	CSSProperties	—	Custom inline styles for the inner `table` element.

THead

Prop	Type	Default	Description
children	ReactNode	—	Header rows and cells.
className	string	—	Custom class names for the header section.
style	CSSProperties	—	Custom inline styles for the header section.
bordered	boolean	—	Pass border state into header rows.

TBody

Prop	Type	Default	Description
children	ReactNode	—	Body rows and cells.
className	string	—	Custom class names for the body section.
style	CSSProperties	—	Custom inline styles for the body section.
striped	boolean	—	Forward striped state to child rows.
hoverable	boolean	—	Forward hoverable state to child rows.
bordered	boolean	—	Forward bordered state to child rows.

TRow

Prop	Type	Default	Description
children	ReactNode	—	Row cells and nested content.
className	string	—	Custom class names for the row.
style	CSSProperties	—	Custom inline styles for the row.
onClick	() => void	—	Add a click handler to the row.
striped	boolean	—	Set striped state on this row.
hoverable	boolean	—	Enable hover styling for this row.
bordered	boolean	—	Show the row border in the row.
index	number	0	Row index used for striped styling.

TH

Prop	Type	Default	Description
children	ReactNode	—	Header cell content.
className	string	—	Custom classes for the header cell.
style	CSSProperties	—	Custom inline styles for the header cell.
bordered	boolean	—	Apply bottom border to the header cell.
dense	boolean	false	Reduce cell padding for compact display.

TD

Prop	Type	Default	Description
children	ReactNode	—	Cell content.
className	string	—	Custom classes for the cell.
style	CSSProperties	—	Custom inline styles for the cell.
dense	boolean	false	Reduce cell padding for compact display.

Pro Tips

Use responsive to enable horizontal scrolling on small screens.
Combine striped and hoverable for better readability.
Use dense mode to display more data in limited space.
Override individual cell styles using className on TH and TD.
Add row click handlers with onClick on TRow component.
Combine with pagination components for large datasets.
Keep columns minimal for better UX on small screens.

Frequently Asked Questions

How do I install and import the Table component?

Install the @neuctra/ui package, then import it with: import { Table } from "@neuctra/ui";

Can I customize the Table component's appearance?

Yes. Table accepts a className prop for custom Tailwind CSS classes, so you can adjust spacing, layout, and styling without overriding the component internals.

Is the Table component accessible?

Table is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.