REDIPS.table documentation

29 thoughts on “REDIPS.table documentation”

1. Hej, thanks for your great code.

   I hope you have a solution for my problem. In each table cell is a textarea with user input. If i load the table and init the REDIPS.table the table cells are empty. How can i keep the init content of table cell?

   Thanks

2. Hello. Can you please make it clear, if I can use REDIPS.table library in my application, selling of which is planned? Thank you in advance.

3. split function causing a loss of cell id
   i merge cell id 1 , 2 , 3 together
   but when split back it left only 1, null , null
   is there a way to avoid this? Thank you in advance.

4. First of all, thanks for sharing this code with the community. It can save a lot of time for so many people.
   That being said, I ran into a problem. I searched for it before writing this comment in order to find a place address this but i could not find any.
   I want to maintain the width and height of the merged cells. if we take example 0 for instance io if we merge 0-0 with 0-1 and 1-0 with 1-1 and so on for every row then we will lose a column witch is expected but we lose the width of the merged cells as well.
   Can you eleborat on what is causing this or where do I start to fix this . thanks.

5. Hi,
   when two columns are merged, lets say that referenced row is lost. In this moment it’s needed to recalculate new width of wider column. Or we can have simpler approach with row header that will preserve each column width. Here is simple modification of example0. To the index.html place new row:

   <thead>
       <tr>
           <td class="ignore"></td>
           <td class="ignore"></td>
           <td class="ignore"></td>
           <td class="ignore"></td>
           <td class="ignore"></td>
           <td class="ignore"></td>
           <td class="ignore"></td>
       </tr>
   </thead>
   

   “.ignore” class name is a signal to the library to omit attaching onclick mouse event listener. And instead of div#myContainer td style, add the following:

   /* table cells */
   td {
       border: 1px solid navy;
       height: 40px;
       width: 70px;
       text-align: center;
       padding: 2px;
   }
   
   /* set styles for header row */
   .ignore {
       height: 1px;
       border: 0px;
   }
   

   Header row can be set without content and with minimal height to be almost invisible.

   Hope this trick will be helpful.
   Cheers!

6. Can you help with this project of my own which I am working on.
   Create a spreadsheet application like Google sheets using Javascript, RxJS, and CSS.

   User Requirements:

   As a user, I should be able to add rows to the spreadsheet using a plus button.
   As a user, I should be able to add columns to the spreadsheet using a plus button.
   As a user, I should be able to delete rows on the spreadsheet using a minus button.
   As a user, I should be able to delete columns on the spreadsheet using a minus button.
   As a user, I should be able to select multiple rows or columns and display their sum in a cell by using a formula. The formula should be of the format “=SUM(START_CELL:END_CELL)”. Example “=SUM(A1:A10)” to display the sum of all items from cell A1 to A10. Any changes to the cell content in the selected range should update the sum.
   As a user, I should be able to perform simple algebraic operations (+, -, *, /) with cell references. Example “=A1+A2”.
   As a user, I should be able to export the sheet as a CSV file.
   As a user, I should be able to load a CSV from the node server on clicking a load button.
   Technical Requirements:

   The goal of this assignment is to learn about JavaScript events & RxJS.
   Events for the formula should be implemented using RxJS and buttons can use simple event listeners.
   On clearing formula, all subscribers and events should be cleared from the page.
   No javascript frameworks should be used except RxJS.
   No CSS frameworks should be used.
   Should use ES6 syntax.

7. Hi Kevin,
   unfortunately I will not be able to participate in your project due to my limited free time. My lib REDIPS.table was build after need for a dynamic table TD merge/split in some project years ago and now it can served as a showcase example. All sources and examples are published on GitHub under BSD license so they can be used as a good start point.

   Anyway, thank you for contacting me and posting a comment.
   Kind regards

8. Hello,
   I apologize for the bad English
   If I want to create dynamic tables [div : contenteditable=”true”] by JS, and then manage them by your library, the ‘load’ event [window.addEventListener(‘load’, redips.init, true);] will not be responsive.
   Is there a way to solve this problem?

9. Here is redips.init() method from example00:

   redips.init = function () {
   	// define reference to the REDIPS.table object
   	var rt = REDIPS.table;
   	// activate onmousedown event listener on TD in table id="mainTable"
   	rt.onMouseDown('mainTable', true);
   	// show cellIndex (it is nice for debugging)
   	rt.cellIndex(true);
   	// define background color for marked cell
   	rt.color.cell = '#9BB3DA';
   };
   

   The only mandatory line is rt.onMouseDown(‘mainTable’, true) and everything else is nice to have. Try to comment out rt.cellIndex(true) line because it’s used only for debugging and maybe it can cause problems in your case.