Skip to main content

​
Overview

The Table component provides a robust solution for displaying tabular data with support for various styling options, actions, and responsive layouts.

​
Basic Usage

import { NSTable } from '@newtonschool/grauity';

const columns = [
  { key: 'name', display: 'Name', width: '200px' },
  { key: 'email', display: 'Email', width: '250px' },
  { key: 'role', display: 'Role' },
];

const rows = [
  {
    name: { display: 'John Doe' },
    email: { display: '[email protected]' },
    role: { display: 'Admin' },
  },
  {
    name: { display: 'Jane Smith' },
    email: { display: '[email protected]' },
    role: { display: 'User' },
  },
];

function MyComponent() {
  return (
    <Table
      columns={columns}
      rows={rows}
      striped={false}
      hoverable={true}
    />
  );
}

​
Props

​
columns
TableColumn[]
Array of column definitions.
​
rows
TableRow[]
Array of row data objects.
​
condensed
boolean
default:true
Use reduced padding for a more compact table.
​
striped
boolean
default:false
Apply alternating row background colors.
​
borderAround
boolean
default:true
Show border around the table.
​
borderWithin
boolean
default:true
Show borders between cells. Has precedence over borderHorizontal and borderVertical.
​
borderHorizontal
boolean
default:true
Show horizontal borders between rows.
​
borderVertical
boolean
default:true
Show vertical borders between columns.
​
loading
boolean
default:false
Show loading state.
​
capitalizeHeaders
boolean
default:true
Automatically capitalize header text.
​
highlightHeaders
boolean
default:true
Apply highlight styling to table headers.
​
hoverable
boolean
default:false
Enable hover effects on table rows.
​
className
string
Additional CSS classes.
​
style
React.CSSProperties
Additional inline styles.

​
Column Definition

interface TableColumn {
  key: string;           // Column identifier
  display: string;       // Header display text
  width?: string;        // Column width
  align?: 'left' | 'right' | 'center';  // Text alignment
  rowSpan?: number;      // Header row span
  colSpan?: number;      // Header col span
}

​
Cell Definition

interface TableCellInterface {
  display?: ReactNode;   // Cell content
  render?: (args: TableCellInterface) => ReactNode;  // Custom render
  vAlign?: 'top' | 'bottom' | 'middle';  // Vertical alignment
  rowSpan?: number;      // Cell row span
  colSpan?: number;      // Cell col span
  actions?: TableCellAction[];  // Row actions
  align?: 'left' | 'right' | 'center';  // Text alignment
}

​
With Custom Alignment

const columns = [
  { key: 'product', display: 'Product', align: 'left' },
  { key: 'price', display: 'Price', align: 'right' },
  { key: 'stock', display: 'Stock', align: 'center' },
];

const rows = [
  {
    product: { display: 'Widget', align: 'left' },
    price: { display: '$29.99', align: 'right' },
    stock: { display: '150', align: 'center' },
  },
];

​
With Row Actions

const rows = [
  {
    name: { display: 'John Doe' },
    email: { display: '[email protected]' },
    actions: {
      actions: [
        {
          key: 'edit',
          display: 'Edit',
          icon: 'edit',
          handleClick: (data) => console.log('Edit', data),
        },
        {
          key: 'delete',
          display: 'Delete',
          icon: 'trash',
          handleClick: (data) => console.log('Delete', data),
        },
      ],
    },
  },
];

​
Custom Cell Render

const rows = [
  {
    name: { display: 'John Doe' },
    status: {
      render: () => (
        <Chip variant="success" size="small">
          Active
        </Chip>
      ),
    },
  },
];

​
Striped Table

<Table
  columns={columns}
  rows={rows}
  striped={true}
/>

​
Hoverable Rows

<Table
  columns={columns}
  rows={rows}
  hoverable={true}
/>

​
Without Borders

<Table
  columns={columns}
  rows={rows}
  borderAround={false}
  borderWithin={false}
/>

​
Condensed vs Regular

// Condensed (default)
<NSTable columns={columns} rows={rows} condensed={true} />

// Regular spacing
<NSTable columns={columns} rows={rows} condensed={false} />

​
Loading State

<Table
  columns={columns}
  rows={rows}
  loading={true}
/>

​
Complex Example

const columns = [
  { key: 'id', display: 'ID', width: '80px', align: 'center' },
  { key: 'name', display: 'Name', width: '200px' },
  { key: 'email', display: 'Email', width: '250px' },
  { key: 'role', display: 'Role', width: '120px' },
  { key: 'status', display: 'Status', width: '100px', align: 'center' },
  { key: 'actions', display: 'Actions', width: '150px', align: 'center' },
];

const rows = [
  {
    id: { display: '1', align: 'center' },
    name: { display: 'John Doe' },
    email: { display: '[email protected]' },
    role: { display: 'Admin' },
    status: {
      render: () => <Chip variant="success" size="small">Active</Chip>,
      align: 'center',
    },
    actions: {
      actions: [
        {
          key: 'edit',
          icon: 'edit',
          display: 'Edit',
          handleClick: (data) => handleEdit(data),
        },
        {
          key: 'delete',
          icon: 'trash',
          display: 'Delete',
          handleClick: (data) => handleDelete(data),
        },
      ],
      align: 'center',
    },
  },
];

<Table
  columns={columns}
  rows={rows}
  striped={true}
  hoverable={true}
  capitalizeHeaders={true}
  highlightHeaders={true}
/>

Build docs developers (and LLMs) love

Get started for freeTalk to us