Add a table with empty column headers in JavaScript

October 29 2021

Background:

By design SpreadJS will add default column headers to a table because table headers have to have a unique name to distinguish between the columns of data. If a developer would like to not show these headers they can set the tables' showHeader method to False, but this will remove the option to filter the table. To workaround this, users can implement their own custom filter range and apply it to a range of cells directly above the table to act as an empty column header with filtering.

Getting Started:

First, set the table’s showHeader method to False as to not see the default column headers:

var sTable = sheet.tables.add("table1", 1, 1, 10, 5, GC.Spread.Sheets.Tables.TableThemes.light13);
    // Set the table header to not show
    sTable.showHeader(false);

Then, get a range of cells above the table, for this example we also have set the background color of the cell range to match the table header styling:

var sTable = sheet.tables.add("table1", 1, 1, 10, 5, GC.Spread.Sheets.Tables.TableThemes.light13);
            // Set the table header to not show
            sTable.showHeader(false);
            // Set range of new range of cells that will be used as the table header
            var range = sheet.getRange(1, 1, 1, 5, GC.Spread.Sheets.SheetArea.viewport);
            // Set backcolor
            range.backColor("#457fd1");

Next, we will add a row filter using the rowFilter method to the cell range to filter through the table

  var sTable = sheet.tables.add("table1", 1, 1, 10, 5, GC.Spread.Sheets.Tables.TableThemes.light13);
            // Set the table header to not show
            sTable.showHeader(false);
            // Set range of new range of cells that will be used as the table header
            var range = sheet.getRange(1, 1, 1, 5, GC.Spread.Sheets.SheetArea.viewport);
            // Set backcolor
            range.backColor("#457fd1");
            // Add row filter to cell range to filter through table
            sheet.rowFilter(new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(2,1,10,5)));

Outcome:

After apply this code logic you will no longer see the default column headers on the JS spreadsheets table. The cell range above the table will act as an empty table header and allows users to filter through the table as normal table headers behave:

Here is a link to a live sample showing this: https://codesandbox.io/s/sjs-js-table-not-headers-with-filtering-h1zy5?file=/index.html

Tags:

Mackenzie Albitz