06-tables

All docs

Table Support

AutoSkeleton preserves HTML table structure during skeleton rendering. Instead of replacing the entire table with a single block, it maintains the table layout (rows, columns, headers) and only skeletonizes the cell content.

How It Works

Table structural elements are never skeletonized. Instead, they are rendered as actual HTML table elements:

ElementBehavior
<table>Rendered as <table> with preserved styles
<thead>Rendered as <thead>
<tbody>Rendered as <tbody>
<tr>Rendered as <tr>
<th>Rendered as <th> — children skeletonized
<td>Rendered as <td> — children skeletonized

Cell content (text, badges, buttons inside <th> and <td>) is replaced with skeleton blocks while the cell structure, widths, and padding are preserved.

Example

tsx
import { AutoSkeleton } from 'auto-skeleton-react';function UserTable({ users, loading }) {  return (    <AutoSkeleton loading={loading}>      <table style={{ width: '100%', borderCollapse: 'collapse' }}>        <thead>          <tr>            <th style={{ padding: '12px 16px', textAlign: 'left' }}>Name</th>            <th style={{ padding: '12px 16px', textAlign: 'left' }}>Email</th>            <th style={{ padding: '12px 16px', textAlign: 'left' }}>Role</th>            <th style={{ padding: '12px 16px', textAlign: 'left' }}>Status</th>          </tr>        </thead>        <tbody>          {users.map(user => (            <tr key={user.id}>              <td style={{ padding: '12px 16px' }}>{user.name}</td>              <td style={{ padding: '12px 16px' }}>{user.email}</td>              <td style={{ padding: '12px 16px' }}>{user.role}</td>              <td style={{ padding: '12px 16px' }}>                <span className="badge">{user.status}</span>              </td>            </tr>          ))}        </tbody>      </table>    </AutoSkeleton>  );}

What the skeleton looks like

┌──────────────┬─────────────────────┬──────────┬──────────┐│ ████████     │ ████████████████    │ ████     │ ██████   │  <- header cells├──────────────┼─────────────────────┼──────────┼──────────┤│ ████████     │ ████████████████    │ ████     │ ██████   │  <- skeleton rows│ ████████     │ ████████████████    │ ████     │ ██████   ││ ████████     │ ████████████████    │ ████     │ ██████   │└──────────────┴─────────────────────┴──────────┴──────────┘

Preserved Table Styles

The following CSS properties are carried over from the original table to the skeleton:

Placeholder Data Pattern

For tables that load data asynchronously, provide placeholder rows during loading so the skeleton has structure to measure:

tsx
const placeholderUsers = [  { id: 1, name: 'John Doe', email: '[email protected]', role: 'Admin', status: 'Active' },  { id: 2, name: 'Jane Smith', email: '[email protected]', role: 'Editor', status: 'Active' },  { id: 3, name: 'Bob Wilson', email: '[email protected]', role: 'Viewer', status: 'Inactive' },];function UserTable() {  const [users, setUsers] = useState([]);  const [loading, setLoading] = useState(true);  useEffect(() => {    fetchUsers().then(data => {      setUsers(data);      setLoading(false);    });  }, []);  // Use placeholder data during loading for measurement  const displayUsers = loading ? placeholderUsers : users;  return (    <AutoSkeleton loading={loading}>      <Table users={displayUsers} />    </AutoSkeleton>  );}

This ensures the skeleton has the right number of rows and column widths to measure.

Limitations