How use custom table in sheet

How use custom table in sheet

Posted by: timur.u on 18 May 2023, 3:48 pm EST

• 

  timur.u

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 18 May 2023, 3:48 pm EST

  I want add some addition information to Table, so created this class

  class CustomTable extends GC.Spread.Sheets.Tables.Table {
  
  constructor(name, range, options) {
  
  super(name, range, options);
  
  this.rowInfo = {};
  
  }

  setRowInfo(row, info) {
    this.rowInfo[row] = info;
  }
  
  getRowInfo(row) {
    return this.rowInfo[row];
  }
  

  }

  const table_new = new CustomTable(‘tableRecords’, new GC.Spread.Sheets.Range(0, 0, 4, 4), {});
  
  table_new.rowInfo[0] = 0000000;
  
  table_new.rowInfo[1] = 1111111;
  
  var tname = table_new.rowInfo[0];
  
  alert(tname);

  const wb = spread.spread.workbook;
  
  var sheet = wb.getActiveSheet();
  
  sheet.tables.add(table_new); // in here I have error
  
  How I can add my table_new to sheet

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 21 May 2023, 11:37 pm EST

  Hello,

  Please note that the table is added to the sheet using tableManager.add() method. The table manager is associated with a sheet and you can access it using sheet.tables property. The tableManager.add() method takes the table name and ranges for the table and creates the GC.Spread.Sheets.Tables.Table class object. Since you are providing the object of custom table in the tableManager.add() method, that is why it throws error.
  
  Please note that you can not create your own custom table and add it using tableManager.add() method.
  
  Please describe about your use case and provide us a sample so that we can better understand your requirements and use case. This will help us to provide the solution accordingly.
  
  Doc reference

  TableManager.add(): https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Sheets.Tables.TableManager

  Regards,
  
  Avinash

• 

  timur.u

  • Post Options:
  • Link
    Copy

  Posted 22 May 2023, 2:46 pm EST

  Thanks for your answer.
  
  I have some object

   var customers = [
         { ID:0, Name:'A', Info:'Info0' },
         { ID:1, Name:'B', Info:'Info1' },
         { ID:2, Name:'C', Info:'Info2' },
      ];

  
  
  but I would like add to table only “Name” and “info” columns. “ID” - column is primary key, user have not access to this column and not know about it.

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 22 May 2023, 9:36 pm EST

  Hello,

  You can use the array of objects as a data source for the table and define columns which will be visible on the table. You can use sheet.tables.add() method to add a table on the worksheet and use method table.bind() to bind the data source for the table.
  
  The table.bind() method takes three arguments which are array of GC.Spread.Sheets.Tables.TableColumn object, binding path within the data source and data source for the table.
  
  It is important to note that you need to use table.autoGenerateColumns(false) method so that the columns in the table will be generated as per the columns provided in table.bind() method. By default, table columns are generated as per the data source of the table.
  
  Please refer to the code snippet and attached sample for further understanding.
  
  let customers = [
  
  { ID: 0, Name: ‘A’, Info: ‘Info0’ },
  
  { ID: 1, Name: ‘B’, Info: ‘Info1’ },
  
  { ID: 2, Name: ‘C’, Info: ‘Info2’ },
  
  ];

  let tableColumn1 = new GC.Spread.Sheets.Tables.TableColumn(1, “Name”, “Name”);
  
  let tableColumn2 = new GC.Spread.Sheets.Tables.TableColumn(2, “Info”, “Info”);
  
  let tableColumns = [tableColumn1, tableColumn2];

  let table = sheet.tables.add(‘Table1’, 2, 2, 3, 2);
  
  table.autoGenerateColumns(false);
  
  table.bind(tableColumns, ‘’, customers);
  
  sample: https://jscodemine.grapecity.com/share/rEKsptg6706mEmEJspn5cA
  
  Please let us know if you still face any issues.
  
  doc reference

  table.bind(): https://www.grapecity.com/spreadjs/api/v16/classes/GC.Spread.Sheets.Tables.Table#bind

  table.autoGenerateColumns(): https://www.grapecity.com/spreadjs/api/v16/classes/GC.Spread.Sheets.Tables.Table#autogeneratecolumns

  TableColumn class: https://www.grapecity.com/spreadjs/api/v16/classes/GC.Spread.Sheets.Tables.TableColumn

  regards,
  
  Avinash

• 

  timur.u

  • Post Options:
  • Link
    Copy

  Posted 22 May 2023, 11:00 pm EST - Updated 22 May 2023, 11:03 pm EST

  Thanks, it works very well.
  
  I need also to fire, wher user added some column. I try use

   sheet.bind(GC.Spread.Sheets.Events.ColumnsAdded, function (sender, args) {....
   sheet.bind(GC.Spread.Sheets.Events.ColumnHeaderAutoText, function (sender, args) {....
    

  
  
  but cannot get events about it. Please see code below
  
  …

  [code]let spread = new GC.Spread.Sheets.Workbook(document.getElementById(“ss”), { sheetCount: 2 });

  initSpread(spread);

  function initSpread(spread) {
  
  let sheet = spread.getSheet(0);

  //sheet.bind(GC.Spread.Sheets.Events.ColumnsAdded, function (sender, args) {
  
  sheet.bind(GC.Spread.Sheets.Events.ColumnHeaderAutoText, function (sender, args) {

  var columnCount = args.count;
  
  var columnIndex = args.column;

  console.log(columnCount + ’ added columns, from index ’ + columnIndex);
  
  });

  let customers = [
      { ID: 0, Name: 'A', Info: 'Info0' },
      { ID: 1, Name: 'B', Info: 'Info1' },
      { ID: 2, Name: 'C', Info: 'Info2' },
  ];
  
  let tableColumn1 = new GC.Spread.Sheets.Tables.TableColumn(1, "Name", "Name");
  let tableColumn2 = new GC.Spread.Sheets.Tables.TableColumn(2, "Info", "Info"); 
  let tableColumns = [tableColumn1, tableColumn2];
  
  let table = sheet.tables.add('Table1', 2, 2, 3, 2);
  table.autoGenerateColumns(false);
  table.bind(tableColumns, '', customers);
  

  }[/code]

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 24 May 2023, 12:36 am EST

  Hi,

  SpreadJS doesn’t have any events named as “ColumnsAdded” and “ColumnHeaderAutoText”. You could refer to the following docs on all the events available: https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Sheets.Events#class-events

  You could use the TableColumnsChanged Event and TableRowsChanged Event that gets triggered when a new column/row is added to the table.

      sheet.bind(GC.Spread.Sheets.Events.TableRowsChanged, function (sender, args) {
          if (args.propertyName === "tableInsertRows") {
              console.log("Table Rows Inserted");
              console.log("Row Count: " + args.count + " Row Index: " + args.row);
          }
  
      });
  
      sheet.bind(GC.Spread.Sheets.Events.TableColumnsChanged, function (sender, args) {
          if (args.propertyName === "tableInsertColumns") {
              console.log("Table Columns Inserted");
              console.log("Column Count: " + args.count + " Column Index: " + args.col);
          }
      });

  You could refer to the following sample that I have created for you.

  Sample: https://jscodemine.grapecity.com/share/b_ZwQ7-AnUuI0CDFFuBgXg/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen={"OpenedFileName"%3A["%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  API References:

  Events Class: https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Sheets.Events#class-events

  TableColumnsChanged Event: https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Sheets.Events#tablecolumnschanged

  TableRowsChanged Event: https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Sheets.Events#tablerowschanged

  Please let us know if you face any problems.

  Regards,

  Ankit

• 

  timur.u

  • Post Options:
  • Link
    Copy

  Posted 24 May 2023, 4:03 pm EST

  Thnks , it works very well