Hiding Columns in rhandsontable using css - html

I am trying to hide columns in a rhandsontable rendered in a Shiny app. I believe that in the current version it can't be done as explained here. However Handsontable does have a Hidden Columns plugin. I am not conversant with how to add plugins. If someone can show me, that would be great.
I am trying a css based approach but that's also failing. In my ui.R, I render the table using rHandsontableOutput("CargoListData"). This table CargoListData has 19 columns and I wish to hide the 18th column. It's a timestamp that I don't wish to display to the user, but I do need it in calculations when the user edits the table and saves it.
I have been trying to hide the column using some css code in my styles.css file of the Shiny app :
#CargoListData > * > td:nth-child(18) {
display: none;
}
However this has no effect on hiding the column. What am I doing wrong?

Since all else failed, here's something I discovered which handles this problem at least for now. My rhandsontable has 19 columns and I wish to hide the 17th to 19th columns. Specifying colWidths as 0.1 (and not 0) solves this.
hot_cols(colWidths = c(rep(150,16),rep(0.1,3)))

Related

How to write the JSON code for adding scroll bar to a cell in SharePoint list column?

I am not a developer but, I was trying to create a SharePoint list for online tracking of all open items in our team site. I was able to get the following code to standardize the font and font size for the columns through the below code
{
"$schema":"http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
"elmType":"div",
"style":{
"font-weight":"bold",
"font-family":"Trebuchet MS",
"font-size":"13px",
"font-size-adjust":"0.58"
},
"txtContent":"#currentField"
}
For two columns containing significant text content, I wanted to limit the maximum row height and introduce vertical scroll bar but, am unable to understand what will be the code and how to add it to the above written code .
Any help or guidance will be highly appreciated.
Thanks in advance.
Running the new code as proposed by #Thriggle did not reduce or modify the row-height of the column.
FURTHER EDIT
JSON code is being added in the List Settings section and choosing individual columns.
--
Kind Regards,
Nilotpal
You can add style properties to define how the cell should display.
The key additions to your style block would be "overflow-y":"auto" and "max-height":"50px" (replacing 50px with whatever maximum height you desire).
Your updated JSON for the advanced column formatting would look something like this:
{
"$schema":"http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
"elmType":"div",
"style":{
"font-weight":"bold",
"font-family":"Trebuchet MS",
"font-size":"13px",
"font-size-adjust":"0.58",
"overflow-y":"auto",
"max-height":"50px"
},
"txtContent":"#currentField"
}
Edit for clarity, here's where you'd add that JSON:
On the list view, click the view selector and choose to format the current view
Instead of applying the formatting to the entire row, add it to the desired column.
Click the link to enter "Advanced mode"
Paste in your JSON declarations and hit the Preview button to see if it works
Alternatively, you can go to the list settings page, then to the settings for the specific column to which you want to apply the formatting, and add the JSON to its Column Formatting setting. This will apply to all views of the list instead of just to the one view.
For all those reading this question, please note the key point of using JSON code formatting feature is that it will be available in "Modern" view of the SharePoint list. The coding shared in the ongoing conversation will provide the desired impact only if the SharePoint list is being viewed in the "modern" OR "new" experience.

Displaying a lot of text in tables

I have a table, this table gets data from a server, and has a few fields,
The data from the server is plain text, but no limit on how many characters.
The table should not be over 900px wide.
View example
As you can see in my plunker some texts gets very long, so they take several rows, while some fit on the first row.
In my opinion, this is not readable at all, it's horrific.
And here's the real problem, since this should be printed some time, all text must be visible.
I have tried fooling around with some fixed tables and overflow: hidden properties, though this does make the table more attractive, a lot of text would be litterly unreadable
Basically what I am asking is if there are any tried methods for displaying (maybe) a lof of texts in tables, and have it readable?
Edit: Okey, as it seems this is the way to do it, there can be some stylig done, but nothing major. There's is one thing that bothers me though, and that's that the title field (field1) is pushed to the left so much.
I know I can set width, but that requires the table to be fixed, and that will cause problems, I need the table to be as dynamic as possible.
Is it possible to set priortiy on which cells the table will break words on first? So that maybe field 1 and 5 have a low priority, so those cells will be less likely to have line breaks?
The ideal solution, and the solution I have used in most of the projects i've done is to add a modal.
For example, if you have a pragraph of texts, the best thing to do it to display a few words and then add a View more button which will open up a modal which will display the entire paragraph.
You can also try to add a View button in the end of each row in another column. Clicking this would open a modal which shows all the data in that row entirely.
This way you can show some information in the table without making it ugly and also provide all the details in the table itself(although its not present in the table view).
It looks fine to me as well, although you may try alternating row colors... add the following rule to your css... you can of course change the color to whatever you like. I find it improves readability:
tbody tr:nth-child(odd) {
background: #eee;
}

how to make a form designer

The Problem in Hand:
I want to make a form designer where user can drag and drop fields of different type and design the layout too, some what similar to wufoo form builder but here the layout is limited to single column whereas I want to make something where user can make the layout as they want.
I understand how to do in single column view, but could not understand how to achieve multiple column layout eg: row 1 there could be 3 elements, row 2 one element stretched to full length, row 3 there could be just 2 elements etc.
What I tried:
I have tried with jquery UI sortable to make a single column layout with using div where new elements can be dragged and repositioned.
Any suggestion on how to proceed further will be helpful
I have tried searching StackOverFlow and google but could not find any link on a similar topic. If anyone could point me to the same, it will be also helpful.
When you reorder elements on wufoo form builder, you can only drag'n'drop up or down. Remove that restriction and as soon as one element is dragged across a certain threshold, it "belongs" to the next column. If the "old" column was the first or last one and the line that the element was moved over was to the "outside" of the form, add a new column there, until the maximal number of columns is reached.
If the used drags the last element of a column into another column, remove the now empty column on element-drop.
You could also remove the dynamic adding/removing of columns and juist have a button ("remove column" & "add column") to do it by code.
An example for the dropping in another column can be found here: http://jqueryui.com/sortable/#connect-lists
Hope this helped!
Edit:
http://jqueryui.com/sortable/#portlets and http://jqueryui.com/sortable/#empty-lists also have elements that you could look into. Good luck! Sounds like a nice project. Can we see any progress or beta?

Page break in table if there is an overflow

I have an application that generates tables for reports; however during printing - the tables may get split, which causes some of the information to get cut off ( I mean it's only printing the top half of letters and then getting split to the next page ).
I've tried page-break-before ; however that causes every table to be on it's own page. page-break-inside seems to be only supported by Opera (And I'm not even sure if that's what I want).
What I'm hoping to find, is something that if the entire table cannot be fit onto a page - it is pushed to the next; or better yet - if the next row is started on the next page.
Any help would be appreciated!
Use Javascript:
Parse data inpage and reformat
Get table height
If table height > page allowed height = add a new table
Each page fits into:
div.page {
height: 842px;
width: 595px;
}
The simplest way of achieving this is a print button that opens a new page, the data is there in a format that Javascript can convert it into a table.
This is the only real accurate way I know of configuring a page of data that splits in tables.

Label whole column for radio-buttons in table

I have a HTML table with several rows and columns and one radio-button in each column. I would like to make it possible to click in any row of the table to select the radiobutton in that column. I know it can be accomplished with the label-tag, by using javascript or some kind of CSS3.
But I would like to know if there is any pure HTML-way to do this? Without adding a label-tag for each cell in the table and not using javascript or CSS.
Because the table has like 15 rows and 10 columns, so it doesn't feel right to add 150 label-tags in the table and it would be nice not to have to rely on javascript or CSS3 that may not be supported or activated in all browsers.
I have read about the colgroup- and col-tags in HTML, but it doesn't seem they can add HTML like a label-tag for all cells in a column.
You should be able to add this feature with JavaScript. Add a click event to the whole <tr> in which you toggle the form field. I recommend using jQuery because it will (1) make this task a lost simpler, and (2) make your solution more likely to work across different browsers & versions.