Mobile Responsive Design

November 4, 2025 · View on GitHub

TablixJS includes built-in mobile responsive features to ensure tables work well on all device sizes.

Horizontal Scrolling

Overview

For tables with many columns that don't fit on smaller screens, TablixJS automatically wraps the table element with a scrollable container. This ensures that:

  • ✅ Controls remain visible - Search bars, pagination, and other controls stay accessible
  • ✅ Only the table scrolls - Users can scroll the table horizontally without losing access to controls
  • ✅ Native scrolling - Uses native browser scrolling for optimal performance
  • ✅ Touch-friendly - Smooth scrolling on iOS and Android devices

Implementation

The table is automatically wrapped with a div.tablix-table-wrapper element:

<div class="tablix-wrapper">
    <!-- Controls (search, filters, etc.) -->
    <div class="tablix-controls">...</div>
    
    <!-- Table wrapper with horizontal scroll -->
    <div class="tablix-table-wrapper" style="overflow-x: auto;">
        <table class="tablix-table">
            <!-- Table content -->
        </table>
    </div>
    
    <!-- Pagination -->
    <div class="tablix-pagination-container">...</div>
</div>

CSS Styling

The table wrapper includes responsive styles:

/* Table wrapper for horizontal scrolling */
.tablix-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  width: 100%;
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
  .tablix-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .tablix-table {
    min-width: 100%;
  }
}

Virtual Scrolling Compatibility

When virtual scrolling is enabled, the table wrapper automatically adjusts to work with the virtual scroll container:

/* Disable separate horizontal scroll when inside virtual scroll container */
.tablix-scroll-container .tablix-table-wrapper {
  overflow-x: visible;
}

The virtual scroll container itself handles both horizontal and vertical scrolling.

Mobile-Friendly Features

Responsive Breakpoints

TablixJS includes responsive breakpoints for optimal display on different devices:

  • Mobile (< 768px): Smaller font sizes, compact padding
  • Tablet (768px - 991.98px): Medium sizing
  • Desktop (> 992px): Full sizing

Font Size Adjustments

:root {
  --tablix-font-size: 14px;           /* Desktop */
  --tablix-mobile-font-size: 13px;    /* Mobile */
}

@media (max-width: 768px) {
  .tablix-table {
    font-size: var(--tablix-mobile-font-size, 13px);
  }
}

Padding Adjustments

:root {
  --tablix-cell-padding: 12px 8px;         /* Desktop */
  --tablix-mobile-cell-padding: 8px 6px;   /* Mobile */
}

@media (max-width: 768px) {
  .tablix-th,
  .tablix-td {
    padding: var(--tablix-mobile-cell-padding, 8px 6px);
  }
}

Custom Styling

You can customize the mobile scrolling behavior:

Customize Scrollbar Appearance

.tablix-table-wrapper {
  /* Customize scrollbar (WebKit browsers) */
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

.tablix-table-wrapper::-webkit-scrollbar {
  height: 8px;
}

.tablix-table-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.tablix-table-wrapper::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.tablix-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Add Shadow Indicators

To show users that more content is available horizontally:

.tablix-table-wrapper {
  position: relative;
}

.tablix-table-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30px;
  background: linear-gradient(to left, rgba(0,0,0,0.1), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

/* Show shadow when scrollable */
.tablix-table-wrapper[data-scrollable="true"]::after {
  opacity: 1;
}

Testing

Test the mobile responsive features:

  1. Browser Dev Tools: Use device emulation in Chrome/Firefox DevTools
  2. Resize Browser: Drag browser window to different widths
  3. Actual Devices: Test on real phones and tablets
  4. Test File: Use examples/mobile-scroll-test.html for comprehensive testing

Example Usage

import Table from 'tablixjs';

// Create table with many columns
const table = new Table('#myTable', {
  data: employees,
  columns: [
    { name: 'id', title: 'ID', width: '60px' },
    { name: 'name', title: 'Name', width: '150px' },
    { name: 'email', title: 'Email', width: '200px' },
    { name: 'phone', title: 'Phone', width: '120px' },
    { name: 'address', title: 'Address', width: '180px' },
    { name: 'city', title: 'City', width: '120px' },
    { name: 'state', title: 'State', width: '80px' },
    // ... more columns
  ],
  pagination: { enabled: true },
  search: { enabled: true }
});

// The table automatically gets the horizontal scroll wrapper
// No additional configuration needed!

Best Practices

1. Set Column Widths

For optimal mobile experience, set explicit column widths:

columns: [
  { name: 'id', title: 'ID', width: '60px' },
  { name: 'name', title: 'Name', width: '150px' },
  { name: 'description', title: 'Description', width: '300px' }
]

2. Prioritize Important Columns

Place the most important columns on the left side, as users will see these first on mobile:

columns: [
  { name: 'name', title: 'Name' },        // Most important
  { name: 'status', title: 'Status' },    // Important
  { name: 'id', title: 'ID' },            // Less important
  { name: 'created', title: 'Created' }   // Less important
]

3. Consider Responsive Column Visibility

For very narrow screens, you might want to hide less important columns using CSS:

@media (max-width: 480px) {
  .tablix-th[data-column="id"],
  .tablix-td:nth-child(1) {
    display: none;
  }
}

4. Test on Real Devices

Always test your tables on actual mobile devices to ensure the scrolling feels natural.

Browser Support

  • ✅ Chrome/Edge (Chromium)
  • ✅ Firefox
  • ✅ Safari (iOS and macOS)
  • ✅ Chrome for Android
  • ✅ Samsung Internet

The -webkit-overflow-scrolling: touch property ensures smooth momentum scrolling on iOS devices.

Troubleshooting

Table Not Scrolling on Mobile

Check:

  1. Ensure the table has enough columns to overflow
  2. Verify CSS is loaded correctly
  3. Check if custom CSS is overriding the wrapper styles

Controls Scrolling with Table

Issue: The entire wrapper is scrolling, not just the table.

Solution: Ensure the .tablix-table-wrapper element is properly nested inside .tablix-wrapper. The structure should be:

.tablix-wrapper
  ├── .tablix-controls (stays fixed)
  ├── .tablix-table-wrapper (scrolls)
  │   └── .tablix-table
  └── .tablix-pagination-container (stays fixed)

Scrollbar Not Visible

Issue: Users don't see the scrollbar on mobile.

Solution: Most mobile browsers hide scrollbars by default. Add visual indicators or rely on touch gestures. Consider adding shadow indicators (see Custom Styling section above).