Fodo Tables

Visual table builder with responsive design, sorting, filtering, and CSV import.

Core features

Installation

1. Download Fodo Tables from your account
2. Upload to /wp-content/plugins/
3. Activate the plugin
4. Go to Fodo Tables in the admin menu

Create your first table

1. Go to Fodo Tables → Add New
2. Enter a table name
3. Add columns with the "Add Column" button
4. Add rows with the "Add Row" button
5. Save your table

Table editor

The visual editor works like a spreadsheet:

• Click cells to edit content
• Drag column headers to reorder
• Click the × button to remove rows/columns
• Changes save automatically

Column types

Embedding tables

Use the shortcode to embed tables:

[fodo_table id="123"]

Shortcode options

[fodo_table id="123" search="true"]        // Enable search
[fodo_table id="123" pagination="true"]    // Enable pagination
[fodo_table id="123" sorting="true"]       // Enable sorting
[fodo_table id="123" rows="10"]            // Rows per page

Combine options:

[fodo_table id="123" search="true" sorting="true" rows="25"]

Responsive modes

Three responsive modes for mobile:

Horizontal scroll (default)

Table scrolls horizontally on small screens. Best for tables with few columns.

Stack (cards)

Each row becomes a card on mobile. Labels shown next to values. Best for data-heavy tables.

Collapse

Hides less important columns on mobile. Shows a toggle to reveal hidden columns.

Configure in Fodo Tables → Settings.

CSV import

Import data from CSV files:

1. Click "Import CSV" in the table editor
2. Select your CSV file
3. Headers become column names
4. Data populates automatically

CSV format:

Name,Email,Status
John Doe,john@example.com,Active
Jane Smith,jane@example.com,Pending

Table styles

Four built-in styles:

• Default: Clean, minimal borders
• Striped: Alternating row colors
• Bordered: Full borders on all cells
• Minimal: No borders, subtle dividers

Configure in Fodo Tables → Settings or per-table.

Sorting and filtering

Sorting

Click any column header to sort:

• First click: Ascending (A-Z, 0-9)
• Second click: Descending (Z-A, 9-0)
• Arrow indicator shows sort direction

Search

Real-time search filters visible rows. Searches across all columns.

Pagination

For large tables:

• Configure rows per page (default: 25)
• Previous/Next navigation
• Shows current position (1-25 of 100)

REST API

Full REST API for table management:

GET /wp-json/fodo-tables/v1/tables
GET /wp-json/fodo-tables/v1/tables/{id}
POST /wp-json/fodo-tables/v1/tables
PUT /wp-json/fodo-tables/v1/tables/{id}
DELETE /wp-json/fodo-tables/v1/tables/{id}

GET /wp-json/fodo-tables/v1/tables/{id}/rows
POST /wp-json/fodo-tables/v1/tables/{id}/rows
POST /wp-json/fodo-tables/v1/tables/{id}/rows/bulk

Create table

POST /wp-json/fodo-tables/v1/tables

{
  "name": "My Table",
  "columns": [
    { "key": "name", "label": "Name", "type": "text" },
    { "key": "email", "label": "Email", "type": "email" },
    { "key": "status", "label": "Status", "type": "text" }
  ],
  "rows": [
    { "name": "John", "email": "john@example.com", "status": "Active" }
  ]
}

Get table with rows

GET /wp-json/fodo-tables/v1/tables/{id}/rows

Response:
{
  "rows": [
    { "id": 1, "data": { "name": "John", "email": "..." }, "order": 1 }
  ],
  "total": 100,
  "columns": [...]
}

Block editor

Use the Fodo Table block in the block editor:

1. Add a new block
2. Search for "Fodo Table"
3. Select a table from the dropdown
4. Configure display options

Hooks and filters

Customize with WordPress hooks:

// Modify table output
add_filter('fodo_tables_cell_output', function($output, $value, $column) {
    if ($column['type'] === 'status') {
        return '<span class="status-' . $value . '">' . $value . '</span>';
    }
    return $output;
}, 10, 3);

// Before table renders
add_action('fodo_tables_before_render', function($table_id) {
    // Add custom CSS or JS
});

Support

Contact support@fodo.dev. Response time: 24-48 hours.