Bootstrap Table - Advanced Data Tables

Create a table with data attributes for configuration:

<table
  id="myTable"
  data-toggle="table"
  data-url="/api/data"
  data-pagination="true"
  data-search="true"
  data-show-columns="true">
  <thead>
    <tr>
      <th data-field="id" data-sortable="true">ID</th>
      <th data-field="name" data-sortable="true">Name</th>
      <th data-field="email">Email</th>
    </tr>
  </thead>
</table>

Create an API endpoint to serve your data:

// Express.js API endpoint
app.get('/api/data', async (req, res) => {
  try {
    // Fetch data from database or file
    const data = await fetchYourData();
    
    // Return data in Bootstrap Table format
    res.json(data);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

Custom Formatters

// Format large numbers with commas
function viewCountFormatter(value, row, index) {
  return parseInt(value).toLocaleString();
}

// Add in table column definition
<th data-formatter="viewCountFormatter">Views</th>

Export Functionality

// Export to CSV
$('#export-csv').click(function() {
  $('#myTable').bootstrapTable('export', {
    type: 'csv',
    fileName: 'data-export'
  });
});

Server-Side Pagination

// For large datasets (10,000+ rows)
data-side-pagination="server"
data-url="/api/data-paginated"

// Server endpoint with pagination
app.get('/api/data-paginated', (req, res) => {
  const { limit, offset, search, sort, order } = req.query;
  // Query database with pagination parameters
  const result = queryDatabase(limit, offset, search, sort, order);
  res.json({
    total: result.total,
    rows: result.rows
  });
});