dataTable

$('#example').DataTable({
  paging: true, // Enable pagination
  lengthChange: true, // Allow users to change the number of rows displayed per page
  pageLength: 10, // Set the default number of rows displayed per page
  lengthMenu: [10, 25, 50, 100], // Specify the options for the number of rows displayed per page
  searching: true, // Enable the search functionality
  ordering: true, // Enable column ordering
  order: [[0, 'asc']], // Set the initial column ordering (column index, order)
  info: true, // Show table information (number of rows, pages, etc.)
  autoWidth: true, // Automatically adjust the width of the columns
  scrollX: false, // Enable horizontal scrolling
  scrollY: false, // Enable vertical scrolling
  fixedHeader: true, // Fix the header to the top of the viewport
  responsive: true, // Enable responsive behavior
  stateSave: true, // Save the state of the table (sorting, search, pagination)
  processing: true, // Show a processing indicator when the table is busy
  language: {
    search: "Filter:", // Customize the search input label
    emptyTable: "No data available in table", // Customize the empty table message
    info: "Showing _START_ to _END_ of _TOTAL_ entries", // Customize the table information element
  },
  ajax: {
    url: '/path/to/your/data', // The URL where the data should be fetched
    dataSrc: '' // The property in the returned data where the table data is stored
  },
  columns: [
    {data: 'column1', title: 'Column 1'}, // Set the data and title for a column
    {data: 'column2', title: 'Column 2'},
    {
      data: 'column3',
      title: 'Column 3',
      searchable: false, // Disable searching for a specific column
      orderable: false, // Disable ordering for a specific column
      visible: false, // Hide a specific column
      width: '10%' // Set the width for a specific column
    },
    {
      data: 'column4',
      title: 'Column 4',
      render: function (data, type, row) {
        if (type === 'display') {
          return '<strong>' + data + '</strong>'; // Customize the display of the data
        }
        return data;
      }
    }
  ],
  createdRow: function (row, data, index) {
    if (data.column1 === 'Special Value') {
      $(row).addClass('highlight'); // Add a class to a row based on the data
    }
  }
});