Table

A component for displaying structured data in a tabular format, providing a flexible and powerful interface for creating data tables with various styling options, sorting capabilities, and responsive behavior.

Basic Table

Create a standard table with headers and data.

Preview Code
Name Email Role
John Doe john@example.com Admin
Jane Smith jane@example.com User
php
Table Options
The Table component provides various customization options.
  • Responsive tables that adapt to screen size
  • Striped rows and columns for better readability
  • Bordered tables with customizable styles
  • Hover effects on rows
  • Sortable and searchable columns
  • Custom column rendering
  • Footer operations for calculations
Table Examples
Here are examples of different table options and styles.

Styled Table

Create a table with various styling options using Bootstrap classes.

Preview Code
Name Email Role
John Doe john@example.com Admin
Jane Smith jane@example.com User
php

Custom Column Rendering

Create a table with custom rendering for each column.

Preview Code
Name Email Role
John Doe john@example.com Admin
Jane Smith jane@example.com User
php

Sortable and Searchable Table

Create a table with sortable and searchable columns.

Preview Code
Name Email Role
John Doe john@example.com Admin
Jane Smith jane@example.com User
php

Table with Footer Operations

Create a table with footer calculations and custom rendering.

Preview Code
Name Sales Average
John Doe 1000 100
Jane Smith 2000 200
3000 150
php

API

The Table component provides methods for creating and configuring tables.
API PHP

Common alternative names: Data Grid, Data Table, Grid View, Spreadsheet View, Matrix View, List View, Data Matrix

Types: Default Tables, Striped Tables, Bordered Tables, Hover Tables, Responsive Tables, Sortable Tables, Searchable Tables, Tables with Footer Operations

Principles

Data Organization

Tables organize data into clear, structured rows and columns, making it easy to scan and compare information.

Visual Hierarchy

Through styling and layout, tables establish clear visual hierarchy, making it easy to distinguish between headers and data.

Information Density

Tables efficiently display large amounts of data while maintaining readability and usability.

Usage

Use tables to display structured data in a grid format. They're particularly effective for:

  • Data lists
  • Comparison tables
  • Grid views
  • Spreadsheet-like interfaces
  • Data matrices
  • Information tables