Table Element

Display multiple videos in a table/list format with sortable columns and pagination.

Free Feature

The Table element is available in the free version of Vimeify.

Overview

The Table element displays videos in a structured table format with columns for thumbnail, title, duration, and date. Perfect for video libraries, archives, and organized collections.

Key Features:

• Sortable columns
• Pagination support
• Category/gallery filtering
• Search functionality
• Responsive design
• Available in all builders

Block Editor (Gutenberg)

Adding a Table Block

1. Edit your page or post
2. Click (+) to add a new block
3. Search for "Vimeify Table"
4. Click to add the block
5. Configure table settings in the sidebar
6. Customize display options
7. Publish or update your page

Block Settings

Content Settings:

• Source: All videos, category, or gallery
• Per Page: Number of videos per page (default: 10)
• Order By: Date, title, or modified date
• Order: Ascending or descending

Display Options:

• Show/hide thumbnail column
• Show/hide title column
• Show/hide duration column
• Show/hide date column
• Enable/disable sorting
• Enable/disable pagination

Styling:

• Table width and alignment
• Custom CSS classes
• Border and spacing options

Shortcode

Use the table shortcode to display video tables anywhere.

Basic Usage

[vimeify_videos_table]

Available Parameters

Parameter	Description	Default	Example
category	Filter by category slug	-	category="tutorials"
gallery	Filter by gallery slug	-	gallery="featured"
per_page	Videos per page	10	per_page="20"
orderby	Sort field	date	orderby="title"
order	Sort direction	DESC	order="ASC"
columns	Columns to display	all	columns="thumbnail,title,date"
search	Enable search box	false	search="true"

Examples

Simple Table:

[vimeify_videos_table]

Category-Filtered Table:

[vimeify_videos_table category="tutorials" per_page="20"]

Custom Columns:

[vimeify_videos_table columns="thumbnail,title,duration"]

With Search:

[vimeify_videos_table search="true" per_page="50"]

Sorted by Title:

[vimeify_videos_table orderby="title" order="ASC"]

Elementor Widget

Adding a Table Widget

1. Open Elementor editor
2. Search for "Vimeify Table" in widgets panel
3. Drag widget to your section
4. Configure table settings in Content tab
5. Style the table in Style tab
6. Update to publish

Widget Settings

Content Tab

Table Source:

• All videos
• Specific category
• Specific gallery

Display Settings:

• Videos per page
• Order by (date, title, modified)
• Sort direction
• Column selection

Table Columns:

• Thumbnail
• Title
• Duration
• Upload date
• Categories/tags

Style Tab

Table Container:

• Background and spacing
• Border and radius
• Shadow effects

Table Header:

• Header background color
• Header text color
• Header font settings
• Header padding

Table Rows:

• Row background (even/odd)
• Row hover effect
• Row padding
• Row border

Pagination:

• Pagination alignment
• Button styling
• Active state styling

Advanced Tab

Layout:

• Custom CSS ID/classes
• Z-index control

Responsive:

• Device-specific settings
• Hide on devices

Bricks Builder

Adding a Table Element

1. Open Bricks builder
2. Click (+) to add element
3. Search for "Vimeify Table"
4. Add element to canvas
5. Configure settings
6. Style using Bricks controls
7. Save page

Element Settings

Content Tab

Table Configuration:

• Select video source (all, category, gallery)
• Set videos per page
• Choose sort field and direction
• Select columns to display

Filter Options:

• Category filter
• Gallery filter
• Date range filter

Style Tab

Use Bricks styling for:

Table Styling:

• Table layout and spacing
• Header styling
• Row styling (alternate rows)
• Hover effects

Column Styling:

• Column widths
• Column alignment
• Cell padding
• Text formatting

Pagination Styling:

• Pagination position
• Button design
• Active state

Advanced Tab

Same options as other Bricks elements (Attributes, Conditions, Interactions, Responsive).

Styling Tips

Zebra Striping

Add alternating row colors for better readability.

CSS:

.vimeify-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

Hover Effects

Highlight rows on hover.

CSS:

.vimeify-table tbody tr:hover {
    background-color: #e8f4f8;
    cursor: pointer;
}

Responsive Tables

Make tables scrollable on mobile.

CSS:

@media (max-width: 768px) {
    .vimeify-table-wrapper {
        overflow-x: auto;
    }
}

Responsive Design

Tables automatically adapt to different screen sizes:

Desktop: Full table with all columns Tablet: Optimized column widths Mobile: Stacked or scrollable layout

Mobile Optimization:

• Hide less important columns on mobile
• Enable horizontal scroll
• Use compact pagination
• Larger tap targets for links

Performance Tips

• Limit videos per page (10-50 recommended)
• Use pagination for large collections
• Filter by category to reduce query size
• Enable caching for better performance

Next Steps

• Video Element - Display single videos
• Grid Element - Show videos in grid layouts (Pro)
• Gallery Element - Create video galleries
• Video Management - Organize your videos