Menu filter is only displaying 5 results

Tags: #<Tag:0x00007efc64ecca90> #<Tag:0x00007efc64ecc8d8>
#1

Hi, my handson table filter menu is only displaying 5 items. The column for this table has more than 5 items, why is this happening?

Thanks,
Joe

#2

Hi @merlin2049er

Can you please provide a code demo showing your current implementation?

#3 
  <script type="text/javascript">

  var hot; // Declare hot variable outside the scope of document.ready

  $(document).ready(function() {


    function dateFormatRenderer(instance, td, row, col, prop, value, cellProperties) { 
      Handsontable.renderers.TextRenderer.apply(this, arguments);
      // Convert the date to the desired format before rendering
      var formattedDate = moment(value).format('DD-MMM-YYYY HH:mm' );
      td.innerHTML = formattedDate;
    }
 
    var container = document.getElementById('timesheet_table');
    // var TimesheetData = <%= raw @timesheets.to_json %>;
    var TimesheetData = <%= raw @transformed_timesheets.to_json %>;

    var people = <%= @people.to_json.html_safe %>;
    var organization = <%= @organization.to_json.html_safe %>;
    var projects = <%= @projects.to_json.html_safe %>;

    hot = new Handsontable(container, { 
      data: TimesheetData,
      colHeaders: ['ID', 'Timesheet', 'Person','Project', 'Time Period', 'Approved by', 'Organiztion', 'Hours', 'Expenses', 'Status' ],

      columns: [
        {data: 'id'},
        {data: 'id', readOnly: true, renderer: hyperlinkRenderer},
        {data: 'person_name', readOnly: true},
        {data: 'project_name', readOnly: true},
        {data: 'start_date', readOnly: true,
          renderer: function(instance, td, row, col, prop, value, cellProperties) {
            Handsontable.renderers.TextRenderer.apply(this, arguments);
            var end_date = instance.getDataAtCell(row, instance.propToCol('end_date'));
            if (end_date) {
              td.innerHTML += ' - ' + end_date;
            }
          }
        },
        {data: 'approved_by_name', readOnly: true},
        {data: 'organization_name', readOnly: true},
        {data: 'calculated_hours', readOnly: true},
        {data: 'calculated_expenses', readOnly: true,
          renderer: function(instance, td, row, col, prop, value, cellProperties) {
            Handsontable.renderers.TextRenderer.apply(this, arguments);
            td.innerHTML = value !== null && value !== undefined ? '$' + value.toFixed(2) : '';
          }
        },
        {data: 'status', readOnly: true}
      ],
      
      manualColumnResize: true,
      columnSorting: true,
      stretchH: 'all',
      preventOverflow: 'horizontal',
      customBorders: true,
      manualColumnMove: true,
      filters: true,
        dropdownMenu: {
        items: {
        //  filter_by_condition: {},
          filter_by_value: { show: true, itemsLimit: 100 }, // Increase itemsLimit as needed
          filter_action_bar: {}
        }
      },
      hiddenColumns: {
        columns: [0]
      },
      columnSorting: {
        initialConfig: {
          column: 1,
          sortOrder: 'desc'
        }
      },
      columnSorting: {
        initialConfig: {
          column: 5,
          sortOrder: 'desc'
        }
      },
      afterGetColHeader: function(col, TH) {
        TH.className = 'htLeft'
      },
      licenseKey: '<%= ENV['HANDSONTABLE_KEY'] %>',

Here’s how it’s implemented. I’ve updated handson table to the latest version 14.5.0.

#4

@merlin2049er

Please use a sandbox like StackBlitz or jsFiddle to show us the demo of your implementation.

#5

oh i found the issue,

// .wtHider {
// height: auto !important; /* Use !important to ensure the style is applied */
// }

commented out this and I got all the results in the menu filter

#6

Hi @merlin2049er

I’m glad that you found the solution. In this case, I’m closing this topic.

#7