BlueStack.io - Component Library

Basic Table

Preview Code

Copy

Name	Position	Office	Age	Salary
John Doe	Software Engineer	San Francisco	28	$120,000
Jane Smith	Product Manager	New York	32	$145,000
Mike Johnson	UX Designer	Los Angeles	26	$95,000
Sarah Williams	Data Analyst	Chicago	29	$85,000

<div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Age</th>
                            <th class="text-right">Salary</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>John Doe</td>
                            <td>Software Engineer</td>
                            <td>San Francisco</td>
                            <td>28</td>
                            <td class="cell-numeric">$120,000</td>
                        </tr>
                        <tr>
                            <td>Jane Smith</td>
                            <td>Product Manager</td>
                            <td>New York</td>
                            <td>32</td>
                            <td class="cell-numeric">$145,000</td>
                        </tr>
                        <tr>
                            <td>Mike Johnson</td>
                            <td>UX Designer</td>
                            <td>Los Angeles</td>
                            <td>26</td>
                            <td class="cell-numeric">$95,000</td>
                        </tr>
                        <tr>
                            <td>Sarah Williams</td>
                            <td>Data Analyst</td>
                            <td>Chicago</td>
                            <td>29</td>
                            <td class="cell-numeric">$85,000</td>
                        </tr>
                    </tbody>
                </table>
            </div>

<div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Age</th>
                            <th class="text-right">Salary</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>John Doe</td>
                            <td>Software Engineer</td>
                            <td>San Francisco</td>
                            <td>28</td>
                            <td class="cell-numeric">$120,000</td>
                        </tr>
                        <tr>
                            <td>Jane Smith</td>
                            <td>Product Manager</td>
                            <td>New York</td>
                            <td>32</td>
                            <td class="cell-numeric">$145,000</td>
                        </tr>
                        <tr>
                            <td>Mike Johnson</td>
                            <td>UX Designer</td>
                            <td>Los Angeles</td>
                            <td>26</td>
                            <td class="cell-numeric">$95,000</td>
                        </tr>
                        <tr>
                            <td>Sarah Williams</td>
                            <td>Data Analyst</td>
                            <td>Chicago</td>
                            <td>29</td>
                            <td class="cell-numeric">$85,000</td>
                        </tr>
                    </tbody>
                </table>
            </div>

Sortable Table

Preview Code

Copy

Product	Category	Price	Stock	Status
MacBook Pro	Laptops	$2,499	12	Available
iPhone 15	Phones	$999	45	Available
iPad Air	Tablets	$599	0	Out of Stock
AirPods Pro	Accessories	$249	8	Low Stock

<div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
  <table class="table">
    <thead>
      <tr>
        <th class="sortable">Product</th>
        <th class="sortable">Category</th>
        <th class="sortable" data-type="numeric">Price</th>
        <th class="sortable" data-type="numeric">Stock</th>
        <th class="sortable">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>MacBook Pro</td>
        <td>Laptops</td>
        <td class="cell-numeric" data-sort="2499">$2,499</td>
        <td class="cell-numeric">12</td>
        <td><span class="badge positive">Available</span></td>
      </tr>
      <tr>
        <td>iPhone 15</td>
        <td>Phones</td>
        <td class="cell-numeric" data-sort="999">$999</td>
        <td class="cell-numeric">45</td>
        <td><span class="badge positive">Available</span></td>
      </tr>
      <tr>
        <td>iPad Air</td>
        <td>Tablets</td>
        <td class="cell-numeric" data-sort="599">$599</td>
        <td class="cell-numeric">0</td>
        <td><span class="badge negative">Out of Stock</span></td>
      </tr>
      <tr>
        <td>AirPods Pro</td>
        <td>Accessories</td>
        <td class="cell-numeric" data-sort="249">$249</td>
        <td class="cell-numeric">8</td>
        <td><span class="badge warning">Low Stock</span></td>
      </tr>
    </tbody>
  </table>
</div>

<div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                <table class="table">
                    <thead>
                        <tr>
                            <th class="sortable">Product</th>
                            <th class="sortable">Category</th>
                            <th class="sortable" data-type="numeric">Price</th>
                            <th class="sortable" data-type="numeric">Stock</th>
                            <th class="sortable">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>MacBook Pro</td>
                            <td>Laptops</td>
                            <td class="cell-numeric" data-sort="2499">$2,499</td>
                            <td class="cell-numeric">12</td>
                            <td><span class="badge positive">Available</span></td>
                        </tr>
                        <tr>
                            <td>iPhone 15</td>
                            <td>Phones</td>
                            <td class="cell-numeric" data-sort="999">$999</td>
                            <td class="cell-numeric">45</td>
                            <td><span class="badge positive">Available</span></td>
                        </tr>
                        <tr>
                            <td>iPad Air</td>
                            <td>Tablets</td>
                            <td class="cell-numeric" data-sort="599">$599</td>
                            <td class="cell-numeric">0</td>
                            <td><span class="badge negative">Out of Stock</span></td>
                        </tr>
                        <tr>
                            <td>AirPods Pro</td>
                            <td>Accessories</td>
                            <td class="cell-numeric" data-sort="249">$249</td>
                            <td class="cell-numeric">8</td>
                            <td><span class="badge warning">Low Stock</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>

Selectable Table with Actions

Preview Code

Copy

User	Email	Role	Status
Alice Johnson	alice@example.com	Admin	Active
Bob Smith	bob@example.com	Editor	Active
Charlie Brown	charlie@example.com	Viewer	Inactive

<div class="space-y-2">
  <div class="selection-count text-sm text-gray-600 font-medium"></div>
  <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
    <table class="table">
      <thead>
        <tr>
          <th class="cell-checkbox">
            <input type="checkbox" class="rounded border-gray-300" />
          </th>
          <th>User</th>
          <th>Email</th>
          <th>Role</th>
          <th>Status</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="cell-checkbox">
            <input type="checkbox" class="rounded border-gray-300" />
          </td>
          <td>Alice Johnson</td>
          <td>alice@example.com</td>
          <td>Admin</td>
          <td><span class="badge positive">Active</span></td>
          <td class="cell-actions">
            <button class="button tiny">Edit</button>
            <button class="button tiny outline">Delete</button>
          </td>
        </tr>
        <tr>
          <td class="cell-checkbox">
            <input type="checkbox" class="rounded border-gray-300" />
          </td>
          <td>Bob Smith</td>
          <td>bob@example.com</td>
          <td>Editor</td>
          <td><span class="badge positive">Active</span></td>
          <td class="cell-actions">
            <button class="button tiny">Edit</button>
            <button class="button tiny outline">Delete</button>
          </td>
        </tr>
        <tr>
          <td class="cell-checkbox">
            <input type="checkbox" class="rounded border-gray-300" />
          </td>
          <td>Charlie Brown</td>
          <td>charlie@example.com</td>
          <td>Viewer</td>
          <td><span class="badge gray">Inactive</span></td>
          <td class="cell-actions">
            <button class="button tiny">Edit</button>
            <button class="button tiny outline">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<div class="space-y-2">
                <div class="selection-count text-sm text-gray-600 font-medium"></div>
                <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                    <table class="table">
                        <thead>
                            <tr>
                                <th class="cell-checkbox">
                                    <input type="checkbox" class="rounded border-gray-300">
                                </th>
                                <th>User</th>
                                <th>Email</th>
                                <th>Role</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="cell-checkbox">
                                    <input type="checkbox" class="rounded border-gray-300">
                                </td>
                                <td>Alice Johnson</td>
                                <td>alice@example.com</td>
                                <td>Admin</td>
                                <td><span class="badge positive">Active</span></td>
                                <td class="cell-actions">
                                    <button class="button tiny">Edit</button>
                                    <button class="button tiny outline">Delete</button>
                                </td>
                            </tr>
                            <tr>
                                <td class="cell-checkbox">
                                    <input type="checkbox" class="rounded border-gray-300">
                                </td>
                                <td>Bob Smith</td>
                                <td>bob@example.com</td>
                                <td>Editor</td>
                                <td><span class="badge positive">Active</span></td>
                                <td class="cell-actions">
                                    <button class="button tiny">Edit</button>
                                    <button class="button tiny outline">Delete</button>
                                </td>
                            </tr>
                            <tr>
                                <td class="cell-checkbox">
                                    <input type="checkbox" class="rounded border-gray-300">
                                </td>
                                <td>Charlie Brown</td>
                                <td>charlie@example.com</td>
                                <td>Viewer</td>
                                <td><span class="badge gray">Inactive</span></td>
                                <td class="cell-actions">
                                    <button class="button tiny">Edit</button>
                                    <button class="button tiny outline">Delete</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

Rich Cell Types

Preview Code

Copy

Feature	Progress	Status
Dashboard Redesign	75%	In Progress
API Integration	100%	Complete
Mobile App	30%	Pending

<div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
  <table class="table">
    <thead>
      <tr>
        <th>Feature</th>
        <th>Progress</th>
        <th>Rating</th>
        <th>Toggle</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Dashboard Redesign</td>
        <td class="cell-progress">
          <div class="progress">
            <div class="progress-bar" style="width: 75%"></div>
          </div>
          <span class="text-xs text-gray-600 ml-2">75%</span>
        </td>
        <td class="cell-rating">
          <div class="rating small">
            <i class="star active"></i>
            <i class="star active"></i>
            <i class="star active"></i>
            <i class="star active"></i>
            <i class="star"></i>
          </div>
        </td>
        <td class="cell-toggle">
          <label class="switch small">
            <input type="checkbox" checked />
            <span class="slider"></span>
          </label>
        </td>
        <td><span class="badge primary">In Progress</span></td>
      </tr>
      <tr>
        <td>API Integration</td>
        <td class="cell-progress">
          <div class="progress">
            <div class="progress-bar bg-green-500" style="width: 100%"></div>
          </div>
          <span class="text-xs text-gray-600 ml-2">100%</span>
        </td>
        <td class="cell-rating">
          <div class="rating small">
            <i class="star active"></i>
            <i class="star active"></i>
            <i class="star active"></i>
            <i class="star active"></i>
            <i class="star active"></i>
          </div>
        </td>
        <td class="cell-toggle">
          <label class="switch small">
            <input type="checkbox" checked />
            <span class="slider"></span>
          </label>
        </td>
        <td><span class="badge positive">Complete</span></td>
      </tr>
      <tr>
        <td>Mobile App</td>
        <td class="cell-progress">
          <div class="progress">
            <div class="progress-bar bg-yellow-500" style="width: 30%"></div>
          </div>
          <span class="text-xs text-gray-600 ml-2">30%</span>
        </td>
        <td class="cell-rating">
          <div class="rating small">
            <i class="star active"></i>
            <i class="star active"></i>
            <i class="star"></i>
            <i class="star"></i>
            <i class="star"></i>
          </div>
        </td>
        <td class="cell-toggle">
          <label class="switch small">
            <input type="checkbox" />
            <span class="slider"></span>
          </label>
        </td>
        <td><span class="badge warning">Pending</span></td>
      </tr>
    </tbody>
  </table>
</div>

<div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Feature</th>
                            <th>Progress</th>
                            <th>Rating</th>
                            <th>Toggle</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Dashboard Redesign</td>
                            <td class="cell-progress">
                                <div class="progress">
                                    <div class="progress-bar" style="width: 75%"></div>
                                </div>
                                <span class="text-xs text-gray-600 ml-2">75%</span>
                            </td>
                            <td class="cell-rating">
                                <div class="rating small">
                                    <i class="star active"></i>
                                    <i class="star active"></i>
                                    <i class="star active"></i>
                                    <i class="star active"></i>
                                    <i class="star"></i>
                                </div>
                            </td>
                            <td class="cell-toggle">
                                <label class="switch small">
                                    <input type="checkbox" checked>
                                    <span class="slider"></span>
                                </label>
                            </td>
                            <td><span class="badge primary">In Progress</span></td>
                        </tr>
                        <tr>
                            <td>API Integration</td>
                            <td class="cell-progress">
                                <div class="progress">
                                    <div class="progress-bar bg-green-500" style="width: 100%"></div>
                                </div>
                                <span class="text-xs text-gray-600 ml-2">100%</span>
                            </td>
                            <td class="cell-rating">
                                <div class="rating small">
                                    <i class="star active"></i>
                                    <i class="star active"></i>
                                    <i class="star active"></i>
                                    <i class="star active"></i>
                                    <i class="star active"></i>
                                </div>
                            </td>
                            <td class="cell-toggle">
                                <label class="switch small">
                                    <input type="checkbox" checked>
                                    <span class="slider"></span>
                                </label>
                            </td>
                            <td><span class="badge positive">Complete</span></td>
                        </tr>
                        <tr>
                            <td>Mobile App</td>
                            <td class="cell-progress">
                                <div class="progress">
                                    <div class="progress-bar bg-yellow-500" style="width: 30%"></div>
                                </div>
                                <span class="text-xs text-gray-600 ml-2">30%</span>
                            </td>
                            <td class="cell-rating">
                                <div class="rating small">
                                    <i class="star active"></i>
                                    <i class="star active"></i>
                                    <i class="star"></i>
                                    <i class="star"></i>
                                    <i class="star"></i>
                                </div>
                            </td>
                            <td class="cell-toggle">
                                <label class="switch small">
                                    <input type="checkbox">
                                    <span class="slider"></span>
                                </label>
                            </td>
                            <td><span class="badge warning">Pending</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>

Table Size Variants

Preview Code

Copy

Tiny

Name	Role	Status
John Doe	Admin	Active
Jane Smith	User	Active

Small

Name	Role	Status
John Doe	Admin	Active
Jane Smith	User	Active

Default

Name	Role	Status
John Doe	Admin	Active
Jane Smith	User	Active

Large

Name	Role	Status
John Doe	Admin	Active
Jane Smith	User	Active

Big

Name	Role	Status
John Doe	Admin	Active
Jane Smith	User	Active

<div class="space-y-4">
  <div>
    <h4 class="text-sm font-semibold text-gray-700 mb-2">Tiny</h4>
    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
      <table class="table tiny">
        <thead>
          <tr>
            <th>Name</th>
            <th>Role</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John Doe</td>
            <td>Admin</td>
            <td><span class="badge tiny positive">Active</span></td>
          </tr>
          <tr>
            <td>Jane Smith</td>
            <td>User</td>
            <td><span class="badge tiny positive">Active</span></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div>
    <h4 class="text-sm font-semibold text-gray-700 mb-2">Small</h4>
    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
      <table class="table small">
        <thead>
          <tr>
            <th>Name</th>
            <th>Role</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John Doe</td>
            <td>Admin</td>
            <td><span class="badge small positive">Active</span></td>
          </tr>
          <tr>
            <td>Jane Smith</td>
            <td>User</td>
            <td><span class="badge small positive">Active</span></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div>
    <h4 class="text-sm font-semibold text-gray-700 mb-2">Default</h4>
    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
      <table class="table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Role</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John Doe</td>
            <td>Admin</td>
            <td><span class="badge positive">Active</span></td>
          </tr>
          <tr>
            <td>Jane Smith</td>
            <td>User</td>
            <td><span class="badge positive">Active</span></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div>
    <h4 class="text-sm font-semibold text-gray-700 mb-2">Large</h4>
    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
      <table class="table large">
        <thead>
          <tr>
            <th>Name</th>
            <th>Role</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John Doe</td>
            <td>Admin</td>
            <td><span class="badge large positive">Active</span></td>
          </tr>
          <tr>
            <td>Jane Smith</td>
            <td>User</td>
            <td><span class="badge large positive">Active</span></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div>
    <h4 class="text-sm font-semibold text-gray-700 mb-2">Big</h4>
    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
      <table class="table big">
        <thead>
          <tr>
            <th>Name</th>
            <th>Role</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John Doe</td>
            <td>Admin</td>
            <td><span class="badge big positive">Active</span></td>
          </tr>
          <tr>
            <td>Jane Smith</td>
            <td>User</td>
            <td><span class="badge big positive">Active</span></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="space-y-4">
                
                <div>
                    <h4 class="text-sm font-semibold text-gray-700 mb-2">Tiny</h4>
                    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                        <table class="table tiny">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Role</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>John Doe</td>
                                    <td>Admin</td>
                                    <td><span class="badge tiny positive">Active</span></td>
                                </tr>
                                <tr>
                                    <td>Jane Smith</td>
                                    <td>User</td>
                                    <td><span class="badge tiny positive">Active</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

<div>
                    <h4 class="text-sm font-semibold text-gray-700 mb-2">Small</h4>
                    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                        <table class="table small">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Role</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>John Doe</td>
                                    <td>Admin</td>
                                    <td><span class="badge small positive">Active</span></td>
                                </tr>
                                <tr>
                                    <td>Jane Smith</td>
                                    <td>User</td>
                                    <td><span class="badge small positive">Active</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

<div>
                    <h4 class="text-sm font-semibold text-gray-700 mb-2">Default</h4>
                    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Role</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>John Doe</td>
                                    <td>Admin</td>
                                    <td><span class="badge positive">Active</span></td>
                                </tr>
                                <tr>
                                    <td>Jane Smith</td>
                                    <td>User</td>
                                    <td><span class="badge positive">Active</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

<div>
                    <h4 class="text-sm font-semibold text-gray-700 mb-2">Large</h4>
                    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                        <table class="table large">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Role</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>John Doe</td>
                                    <td>Admin</td>
                                    <td><span class="badge large positive">Active</span></td>
                                </tr>
                                <tr>
                                    <td>Jane Smith</td>
                                    <td>User</td>
                                    <td><span class="badge large positive">Active</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

<div>
                    <h4 class="text-sm font-semibold text-gray-700 mb-2">Big</h4>
                    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                        <table class="table big">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Role</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>John Doe</td>
                                    <td>Admin</td>
                                    <td><span class="badge big positive">Active</span></td>
                                </tr>
                                <tr>
                                    <td>Jane Smith</td>
                                    <td>User</td>
                                    <td><span class="badge big positive">Active</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

Table Style Variants

Preview Code

Copy

Bordered

Product	Price	Quantity
Widget A	$19.99	100
Widget B	$29.99	50

Striped

Product	Price	Quantity
Widget A	$19.99	100
Widget B	$29.99	50
Widget C	$39.99	25
Widget D	$49.99	10

Compact

Product	Price	Quantity
Widget A	$19.99	100
Widget B	$29.99	50

Spacious

Product	Price	Quantity
Widget A	$19.99	100
Widget B	$29.99	50

<div class="space-y-6">
  <div>
    <h4 class="text-sm font-semibold text-gray-700 mb-2">Bordered</h4>
    <div class="overflow-hidden">
      <table class="table bordered">
        <thead>
          <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Quantity</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Widget A</td>
            <td class="cell-numeric">$19.99</td>
            <td class="cell-numeric">100</td>
          </tr>
          <tr>
            <td>Widget B</td>
            <td class="cell-numeric">$29.99</td>
            <td class="cell-numeric">50</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div>
    <h4 class="text-sm font-semibold text-gray-700 mb-2">Striped</h4>
    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
      <table class="table striped">
        <thead>
          <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Quantity</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Widget A</td>
            <td class="cell-numeric">$19.99</td>
            <td class="cell-numeric">100</td>
          </tr>
          <tr>
            <td>Widget B</td>
            <td class="cell-numeric">$29.99</td>
            <td class="cell-numeric">50</td>
          </tr>
          <tr>
            <td>Widget C</td>
            <td class="cell-numeric">$39.99</td>
            <td class="cell-numeric">25</td>
          </tr>
          <tr>
            <td>Widget D</td>
            <td class="cell-numeric">$49.99</td>
            <td class="cell-numeric">10</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div>
    <h4 class="text-sm font-semibold text-gray-700 mb-2">Compact</h4>
    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
      <table class="table compact">
        <thead>
          <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Quantity</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Widget A</td>
            <td class="cell-numeric">$19.99</td>
            <td class="cell-numeric">100</td>
          </tr>
          <tr>
            <td>Widget B</td>
            <td class="cell-numeric">$29.99</td>
            <td class="cell-numeric">50</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div>
    <h4 class="text-sm font-semibold text-gray-700 mb-2">Spacious</h4>
    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
      <table class="table spacious">
        <thead>
          <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Quantity</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Widget A</td>
            <td class="cell-numeric">$19.99</td>
            <td class="cell-numeric">100</td>
          </tr>
          <tr>
            <td>Widget B</td>
            <td class="cell-numeric">$29.99</td>
            <td class="cell-numeric">50</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="space-y-6">
                
                <div>
                    <h4 class="text-sm font-semibold text-gray-700 mb-2">Bordered</h4>
                    <div class="overflow-hidden">
                        <table class="table bordered">
                            <thead>
                                <tr>
                                    <th>Product</th>
                                    <th>Price</th>
                                    <th>Quantity</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Widget A</td>
                                    <td class="cell-numeric">$19.99</td>
                                    <td class="cell-numeric">100</td>
                                </tr>
                                <tr>
                                    <td>Widget B</td>
                                    <td class="cell-numeric">$29.99</td>
                                    <td class="cell-numeric">50</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

<div>
                    <h4 class="text-sm font-semibold text-gray-700 mb-2">Striped</h4>
                    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                        <table class="table striped">
                            <thead>
                                <tr>
                                    <th>Product</th>
                                    <th>Price</th>
                                    <th>Quantity</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Widget A</td>
                                    <td class="cell-numeric">$19.99</td>
                                    <td class="cell-numeric">100</td>
                                </tr>
                                <tr>
                                    <td>Widget B</td>
                                    <td class="cell-numeric">$29.99</td>
                                    <td class="cell-numeric">50</td>
                                </tr>
                                <tr>
                                    <td>Widget C</td>
                                    <td class="cell-numeric">$39.99</td>
                                    <td class="cell-numeric">25</td>
                                </tr>
                                <tr>
                                    <td>Widget D</td>
                                    <td class="cell-numeric">$49.99</td>
                                    <td class="cell-numeric">10</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

<div>
                    <h4 class="text-sm font-semibold text-gray-700 mb-2">Compact</h4>
                    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                        <table class="table compact">
                            <thead>
                                <tr>
                                    <th>Product</th>
                                    <th>Price</th>
                                    <th>Quantity</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Widget A</td>
                                    <td class="cell-numeric">$19.99</td>
                                    <td class="cell-numeric">100</td>
                                </tr>
                                <tr>
                                    <td>Widget B</td>
                                    <td class="cell-numeric">$29.99</td>
                                    <td class="cell-numeric">50</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

<div>
                    <h4 class="text-sm font-semibold text-gray-700 mb-2">Spacious</h4>
                    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                        <table class="table spacious">
                            <thead>
                                <tr>
                                    <th>Product</th>
                                    <th>Price</th>
                                    <th>Quantity</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Widget A</td>
                                    <td class="cell-numeric">$19.99</td>
                                    <td class="cell-numeric">100</td>
                                </tr>
                                <tr>
                                    <td>Widget B</td>
                                    <td class="cell-numeric">$29.99</td>
                                    <td class="cell-numeric">50</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

Table with Pagination

Preview Code

Copy

Order ID	Customer	Date	Total	Status
#001234	Alice Johnson	2024-01-15	$250.00	Delivered
#001235	Bob Smith	2024-01-16	$125.50	Shipped
#001236	Charlie Brown	2024-01-17	$450.00	Processing
#001237	Diana Prince	2024-01-18	$75.25	Delivered
#001238	Edward Norton	2024-01-19	$320.00	Cancelled

Showing 1 to 5 of 25 entries

<div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
  <table class="table" id="paginated-table">
    <thead>
      <tr>
        <th>Order ID</th>
        <th>Customer</th>
        <th>Date</th>
        <th>Total</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>#001234</td>
        <td>Alice Johnson</td>
        <td>2024-01-15</td>
        <td class="cell-numeric">$250.00</td>
        <td><span class="badge positive">Delivered</span></td>
      </tr>
      <tr>
        <td>#001235</td>
        <td>Bob Smith</td>
        <td>2024-01-16</td>
        <td class="cell-numeric">$125.50</td>
        <td><span class="badge primary">Shipped</span></td>
      </tr>
      <tr>
        <td>#001236</td>
        <td>Charlie Brown</td>
        <td>2024-01-17</td>
        <td class="cell-numeric">$450.00</td>
        <td><span class="badge warning">Processing</span></td>
      </tr>
      <tr>
        <td>#001237</td>
        <td>Diana Prince</td>
        <td>2024-01-18</td>
        <td class="cell-numeric">$75.25</td>
        <td><span class="badge positive">Delivered</span></td>
      </tr>
      <tr>
        <td>#001238</td>
        <td>Edward Norton</td>
        <td>2024-01-19</td>
        <td class="cell-numeric">$320.00</td>
        <td><span class="badge negative">Cancelled</span></td>
      </tr>
    </tbody>
  </table>
  <div class="table-pagination">
    <div class="info">Showing 1 to 5 of 25 entries</div>
    <div class="controls">
      <button class="button" disabled>Previous</button>
      <button class="button active" data-page="1">1</button>
      <button class="button" data-page="2">2</button>
      <button class="button" data-page="3">3</button>
      <button class="button" data-page="4">4</button>
      <button class="button" data-page="5">5</button>
      <button class="button" data-page="2">Next</button>
    </div>
  </div>
</div>

<div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                <table class="table" id="paginated-table">
                    <thead>
                        <tr>
                            <th>Order ID</th>
                            <th>Customer</th>
                            <th>Date</th>
                            <th>Total</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>#001234</td>
                            <td>Alice Johnson</td>
                            <td>2024-01-15</td>
                            <td class="cell-numeric">$250.00</td>
                            <td><span class="badge positive">Delivered</span></td>
                        </tr>
                        <tr>
                            <td>#001235</td>
                            <td>Bob Smith</td>
                            <td>2024-01-16</td>
                            <td class="cell-numeric">$125.50</td>
                            <td><span class="badge primary">Shipped</span></td>
                        </tr>
                        <tr>
                            <td>#001236</td>
                            <td>Charlie Brown</td>
                            <td>2024-01-17</td>
                            <td class="cell-numeric">$450.00</td>
                            <td><span class="badge warning">Processing</span></td>
                        </tr>
                        <tr>
                            <td>#001237</td>
                            <td>Diana Prince</td>
                            <td>2024-01-18</td>
                            <td class="cell-numeric">$75.25</td>
                            <td><span class="badge positive">Delivered</span></td>
                        </tr>
                        <tr>
                            <td>#001238</td>
                            <td>Edward Norton</td>
                            <td>2024-01-19</td>
                            <td class="cell-numeric">$320.00</td>
                            <td><span class="badge negative">Cancelled</span></td>
                        </tr>
                    </tbody>
                </table>
                <div class="table-pagination">
                    <div class="info">
                        Showing 1 to 5 of 25 entries
                    </div>
                    <div class="controls">
                        <button class="button" disabled>Previous</button>
                        <button class="button active" data-page="1">1</button>
                        <button class="button" data-page="2">2</button>
                        <button class="button" data-page="3">3</button>
                        <button class="button" data-page="4">4</button>
                        <button class="button" data-page="5">5</button>
                        <button class="button" data-page="2">Next</button>
                    </div>
                </div>
            </div>

Color Variants

Preview Code

Copy

Primary

Feature	Status
Feature A	Active
Feature B	Pending

Positive

Test	Result
Unit Tests	Passed
Integration Tests	Passed

Warning

Resource	Usage
CPU	85%
Memory	78%

<div class="space-y-4">
  <div>
    <h4 class="text-sm font-semibold text-gray-700 mb-2">Primary</h4>
    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
      <table class="table primary">
        <thead>
          <tr>
            <th>Feature</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr class="selected">
            <td>Feature A</td>
            <td><span class="badge primary">Active</span></td>
          </tr>
          <tr>
            <td>Feature B</td>
            <td><span class="badge">Pending</span></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div>
    <h4 class="text-sm font-semibold text-gray-700 mb-2">Positive</h4>
    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
      <table class="table positive">
        <thead>
          <tr>
            <th>Test</th>
            <th>Result</th>
          </tr>
        </thead>
        <tbody>
          <tr class="selected">
            <td>Unit Tests</td>
            <td><span class="badge positive">Passed</span></td>
          </tr>
          <tr>
            <td>Integration Tests</td>
            <td><span class="badge positive">Passed</span></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div>
    <h4 class="text-sm font-semibold text-gray-700 mb-2">Warning</h4>
    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
      <table class="table warning">
        <thead>
          <tr>
            <th>Resource</th>
            <th>Usage</th>
          </tr>
        </thead>
        <tbody>
          <tr class="selected">
            <td>CPU</td>
            <td><span class="badge warning">85%</span></td>
          </tr>
          <tr>
            <td>Memory</td>
            <td><span class="badge warning">78%</span></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="space-y-4">
                
                <div>
                    <h4 class="text-sm font-semibold text-gray-700 mb-2">Primary</h4>
                    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                        <table class="table primary">
                            <thead>
                                <tr>
                                    <th>Feature</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="selected">
                                    <td>Feature A</td>
                                    <td><span class="badge primary">Active</span></td>
                                </tr>
                                <tr>
                                    <td>Feature B</td>
                                    <td><span class="badge">Pending</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

<div>
                    <h4 class="text-sm font-semibold text-gray-700 mb-2">Positive</h4>
                    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                        <table class="table positive">
                            <thead>
                                <tr>
                                    <th>Test</th>
                                    <th>Result</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="selected">
                                    <td>Unit Tests</td>
                                    <td><span class="badge positive">Passed</span></td>
                                </tr>
                                <tr>
                                    <td>Integration Tests</td>
                                    <td><span class="badge positive">Passed</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

<div>
                    <h4 class="text-sm font-semibold text-gray-700 mb-2">Warning</h4>
                    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                        <table class="table warning">
                            <thead>
                                <tr>
                                    <th>Resource</th>
                                    <th>Usage</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="selected">
                                    <td>CPU</td>
                                    <td><span class="badge warning">85%</span></td>
                                </tr>
                                <tr>
                                    <td>Memory</td>
                                    <td><span class="badge warning">78%</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

Empty State

Preview Code

Copy

Name	Email	Role	Status
No data available There are no records to display at this time.

<div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
  <table class="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Role</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td colspan="4" class="table-empty">
          <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
            ></path>
          </svg>
          <div class="title">No data available</div>
          <div class="description">There are no records to display at this time.</div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Role</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="4" class="table-empty">
                                <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
                                </svg>
                                <div class="title">No data available</div>
                                <div class="description">There are no records to display at this time.</div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

Responsive Table

Preview Code

Copy

This table stacks on mobile devices. Resize your browser to see the effect.

Product	Category	Price	Stock
MacBook Pro	Laptops	$2,499	12
iPhone 15	Phones	$999	45
iPad Air	Tablets	$599	0

<p class="text-sm text-gray-600 mb-3">
  This table stacks on mobile devices. Resize your browser to see the effect.
</p>
<div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
  <table class="table responsive">
    <thead>
      <tr>
        <th>Product</th>
        <th>Category</th>
        <th>Price</th>
        <th>Stock</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="Product">MacBook Pro</td>
        <td data-label="Category">Laptops</td>
        <td data-label="Price" class="cell-numeric">$2,499</td>
        <td data-label="Stock" class="cell-numeric">12</td>
      </tr>
      <tr>
        <td data-label="Product">iPhone 15</td>
        <td data-label="Category">Phones</td>
        <td data-label="Price" class="cell-numeric">$999</td>
        <td data-label="Stock" class="cell-numeric">45</td>
      </tr>
      <tr>
        <td data-label="Product">iPad Air</td>
        <td data-label="Category">Tablets</td>
        <td data-label="Price" class="cell-numeric">$599</td>
        <td data-label="Stock" class="cell-numeric">0</td>
      </tr>
    </tbody>
  </table>
</div>

<p class="text-sm text-gray-600 mb-3">This table stacks on mobile devices. Resize your browser to see the effect.</p>
            <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                <table class="table responsive">
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th>Category</th>
                            <th>Price</th>
                            <th>Stock</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td data-label="Product">MacBook Pro</td>
                            <td data-label="Category">Laptops</td>
                            <td data-label="Price" class="cell-numeric">$2,499</td>
                            <td data-label="Stock" class="cell-numeric">12</td>
                        </tr>
                        <tr>
                            <td data-label="Product">iPhone 15</td>
                            <td data-label="Category">Phones</td>
                            <td data-label="Price" class="cell-numeric">$999</td>
                            <td data-label="Stock" class="cell-numeric">45</td>
                        </tr>
                        <tr>
                            <td data-label="Product">iPad Air</td>
                            <td data-label="Category">Tablets</td>
                            <td data-label="Price" class="cell-numeric">$599</td>
                            <td data-label="Stock" class="cell-numeric">0</td>
                        </tr>
                    </tbody>
                </table>
            </div>

table Component

Table System

Basic Table

Sortable Table

Selectable Table with Actions

Rich Cell Types

Table Size Variants

Tiny

Small

Default

Large

Big

Table Style Variants

Bordered

Striped

Compact

Spacious

Table with Pagination

Color Variants

Primary

Positive

Warning

Empty State

Responsive Table