How do I add a button to a table cell?

Thank you so much! I was able to get it to work by also switching the render property from “auto” to “view”. The only problem that I have now is I cannot stop the button from appearing for each row. The data that populates the table has two columns. One of them has a bit datatype which. In the table, I have set the viewPath property on the column that is populated by the bit data. But I think I want actually be doing is setting the viewPath on the cell instead as @zacht suggests. With that said, I am having difficulty adding the view to the cell. I realize that Tables cannot be changed and a copy will be created. So I am taking my original data and converting it to a PyDataSet then looping through the rows. My plan is to determine which row of the bit column is 1 “true” while looping the rows and once I find one of those rows, I access the same row/column in the table and add a view to it (Please let me know if there is an easier way) . I have tried to adding the view to a cell using table.props.data[rowNum][columnNum].viewPath = “”. Which throws an error. I’ve also tried looking at table.props.rows and table.props.cells but I still can’t seem to get the view to appear “only” where I want it to be. Do you (or anyone else) have any suggestions that I might try?

Hi, I would like to add a button within a tablepress table. I know I have to add custom css to the plugin options, but I’m stuck (before I got started) as I don’t have any experience.

Basically I want to add a button similar to the ones on this page:https://www.leadingcourses.com/blog/top-10-golf-courses-in-the-algarve/ to a new column (far right) in the table press table on this page: https://www.leadingcourses.com/blog/best-golf-resorts-europe/

Ideally the button should be quite small and be on one line.

My first problem is that I don’t know the tablepress id as it was mentioned in another post:

.tablepress-id-BestLEDGrowLights .column-4 a

Besides that it would be about customizing the look of the button.

Hope someone (Tobias?) can help!

Thanks in advance, Ruben

The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

• Plugin Author TobiasBg

  (@tobiasbg)

  Hi,

  thanks for your question, and sorry for the trouble.

  For this, you’d first have to add a simple clickable link to the last column in that table. You could either use HTML code directly or use the “Insert Link” button below the table input fields.

  Then, we can turn those clickable links into buttons (or rather links that look like buttons), via CSS code.
  In your case, the “Custom CSS” would look like

  .tablepress-id-28 .column-8 a {
    padding: 4px;
    border-radius: 4px;
    background-color: #ef7d00;
    white-space: nowrap;
  }

  Regards,
  Tobias

  Thread Starter rubenvdzaag

  (@rubenvdzaag)

  Thanks Tobias, that works like a charm! The only problem I have not is that the link that I use does not display the correct page for some reason. Could that be because it ends with .html?

  Plugin Author TobiasBg

  (@tobiasbg)

  Hi,

  where can I see that? I don’t see the buttons in your table?

  Regards,
  Tobias

  Thread Starter rubenvdzaag

  (@rubenvdzaag)

  Apologies, I added it to a blogpost that hasn’t been published yet. But it ssems to work fine now, so no worries!

  I have been exploring the dd classes for some days now. I have a persistent problem which I can not find a way of resolving. I create an html table into which I want to put text and buttons. If for every column I only put in text, then the alignement is quite acceptable. That is the height of the cells are commensurate with the height of the text, or there does not appear to be any padding in the cells above or elow the texts.

  Now to add a button I first add a form area in the column which will contain the button. This works fine but then the height of the cell is no longer just the height of the button. I have tried the methods NO_LINEBREAK( start = 'X' ) and NO_LINEBREAK( end = 'X' ) at the begining and end of the column, that is before going to the next column.

  This has the effect of removing the first break only, so the top of the button is just below the cell top but the bottom of the button is one line break away from the bottom of the cell. So it would appear that a for area always ends with a line break.

  The only way I found to almost do this is to assign 'X' to the attribute line_with_layout. Which should not be done and adds a column to the table anyway.

  How do you add a button to a table?

  To modify a button in a table. Select the table. In the Properties tab, select the Tree/Table Property property, and double-click its ellipsis button. In the Tree/Table Property dialog box, find and note the name of the button field in the Table Columns list.

  How to add button in table cell using JavaScript?

  createElement('button'); // CREATE THE BUTTON. var bText = document. createTextNode('Submit'); // CREATE TEXT FOR THE BUTTON button. appendChild(bText); // ADD THE TEXT TO THE BUTTON.

  How do I add a row to a table in button click?

  To do so, define a function named “addRow()” that will be called on the button's onclick() event. Then, fetch the created table using the “getElementById()” method. After that, call the “insertRow()” method by passing the “0” index as a parameter that indicates the row will be added at the start of the table.

  How do I edit a row in a table in HTML?

  I have three approaches, Here you can use both <input> or <textarea> as per your requirements..

  Use Input in <td> . Using <input> element in all <td> s, <tr><td><input type="text"></td>....</ ... .

  Use contenteditable='true' attribute. ( HTML5) ... .

  Append <input> to <td> when it is clicked..