REDIPS.table documentation – Redips spideR Net

Namespace Summary
Constructor Attributes	Constructor Name and Description
	REDIPS.table Version 1.2.0 REDIPS.table is a JavaScript library which enables dynamically merging and splitting table cells. See: Merge and split table cells with JavaScript

Field Summary
Field Attributes	Field Name and Description
	color color.cell defines background color for marked table cell.
	markNonEmpty Enable / disable marking not empty table cells.

Method Summary
Method Attributes	Method Name and Description
	cellIgnore(c) Method removes attached onMouseDown event listener.
	cellIndex(flag) Display cellIndex for each cell in tables.
	column(table, mode, index) Add or delete table column.
	mark(flag, el, row, col) Method sets or removes mark from table cell.
	merge(mode, clear, table) Method merges marked table cells horizontally or vertically.
	onMouseDown(el, flag, type) Method attaches or removes onMouseDown event listener on TD elements depending on second parameter value (default is true).
	row(table, mode, index) Add or delete table row.
	split(mode, table) Method splits marked table cell only if cell has colspan/rowspan greater then 1.

Field Detail

{Object} color

color.cell defines background color for marked table cell. If not set then background color will not be changed.

// set "#9BB3DA" as color for marked cell
REDIPS.table.color.cell = '#9BB3DA';

Default Value:: null

{Boolean} markNonEmpty

Enable / disable marking not empty table cells.

// allow marking only empty cells
REDIPS.table.markNonEmpty = false;

Default Value:: true

Method Detail

cellIgnore(c)

Method removes attached onMouseDown event listener. Sometimes is needed to manually ignore some cells in table after row/column is dynamically added.

Parameters:
{HTMLElement|String} c: Cell id or cell reference of table that should be ignored (onMouseDown event listener will be removed).

cellIndex(flag)

Display cellIndex for each cell in tables. It is useful in debuging process.

Parameters:
{Boolean} flag: If set to true then cell content will be replaced with cell index.

column(table, mode, index)

Add or delete table column. Last column will be assumed if index is omitted.

Parameters:
{HTMLElement|String} table: Table id or table reference.
{String} mode: Insert / delete table column
{Integer} index Optional: Index where column will be inserted or deleted. Last column will be assumed if index is not defined.

mark(flag, el, row, col)

Method sets or removes mark from table cell. It can be called on several ways: with direct cell address (cell reference or cell id) or with cell coordinates (row and column).

// set mark to the cell with "mycell" reference
REDIPS.table.mark(true, mycell);

// remove mark from the cell with id "a1"
REDIPS.table.mark(false, 'a1');

// set mark to the cell with coordinates (1,2) on table with reference "mytable"
REDIPS.table.mark(true, mytable, 1, 2);

// remove mark from the cell with coordinates (4,5) on table with id "t3"
REDIPS.table.mark(false, 't3', 4, 5);

Parameters:
{Boolean} flag: If set to true then TD will be marked, otherwise table cell will be cleaned.
{HTMLElement|String} el: Cell reference or id of table cell. Or it can be table reference or id of the table.
{Integer} row Optional: Row of the cell.
{Integer} col Optional: Column of the cell.

merge(mode, clear, table)

Method merges marked table cells horizontally or vertically.

Parameters:
{String} mode: Merge type: h – horizontally, v – vertically. Default is “h”.
{Boolean} clear Optional: true – cells will be clean (without mark) after merging, false – cells will remain marked after merging. Default is “true”.
{HTMLElement|String} table Optional: Table id or table reference.

onMouseDown(el, flag, type)

Method attaches or removes onMouseDown event listener on TD elements depending on second parameter value (default is true). If third parameter is set to “classname” then tables will be selected by class name (named in first parameter). All found tables will be saved in internal array. Sending reference in this case will not be needed when calling merge or split method. Table cells marked with class name “ignore” will not have attached onMouseDown event listener (in short, these table cells will be ignored).

// activate onMouseDown event listener on cells within table with id="mainTable"
REDIPS.table.onMouseDown('mainTable', true);

// activate onMouseDown event listener on cells for tables with class="blue"
REDIPS.table.onMouseDown('blue', true, 'classname');

Parameters:
{String|HTMLElement} el: Container Id. TD elements within container will have added onMouseDown event listener.
{Boolean} flag Optional: If set to true then onMouseDown event listener will be attached to every table cell.
{String} type Optional: If set to “class name” then all tables with a given class name (first parameter is considered as class name) will be initialized. Default is container/table reference or container/table id.

{HTMLElement} row(table, mode, index)

Add or delete table row. If index is omitted then index of last row will be used.

Parameters:
{HTMLElement|String} table: Table id or table reference.
{String} mode: Insert/delete table row
{Integer} index Optional: Index where row will be inserted or deleted. Last row will be assumed if index is not defined.

Returns:: {HTMLElement} Returns reference of inserted row or NULL (in case of deleting row).

split(mode, table)

Method splits marked table cell only if cell has colspan/rowspan greater then 1.

Parameters:
{String} mode: Split type: h – horizontally, v – vertically. Default is “h”.
{HTMLElement|String} table Optional: Table id or table reference.

27 thoughts on “REDIPS.table documentation”

Swen

17.03.2016. at 18:44

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
Vaxo

12.12.2017. at 12:33

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.
YowaneSan

27.03.2018. at 00:39

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.
Andam

17.03.2019. at 14:57

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.
dbunic

18.03.2019. at 09:34
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!
Kevin Malone

04.03.2020. at 21:43

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.
dbunic

05.03.2020. at 13:42

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

27 thoughts on “REDIPS.table documentation”

Leave a Comment Cancel reply