I'm trying to print a Tabulator table using the print() method on the table object.
I need to set custom styling, so I'm setting the second parameter to true. This works in reproducing the styling of the table (with the usual HTML caveats, such as removed backgrounds).
However, I would like to use an entirely different style for printing. I tried to add rules of the following form to the stylesheet:
.tabulator-print-table .tabulator-headers {
border: black 3px;
}
However, these do not seem to have the desired effect (in the above example, I can't see any border in the printout).
That is totally possible, but i can see two issues with your current approach.
The first issue is that when doing whole table printing, the table is actually replaced by a standard HTML table because browsers know how to print this better, so only the classes defined in the Print Styling List are available, all other selection should be done using standard table elements, so to style a column header would be:
.tabulator-print-table th{
//style table column header
}
To style the row containing the table headers would be:
.tabulator-print-table thead tr{
//style table header row
}
The other issue you may be facing is if you have set the printStyled option to true in the table setup then it will be applying the existing table styles as inline styles to each of the print tables elements, so you may need to use the !important flag to override the inline styles:
border: black 3px !important;
Related
Looking for some assistance on the correct CSS override to change the font in the header filter dropdown list and the value that remains in the filter text field.
I have tried the following in my custom CSS file:
.tabulator .tabulator-header-filter {
font-size: 7.5pt;
}
but it doesn't seem to stick, even after a hard refresh.
When using fitColumns setting of tabulator, if the table is wider than the containing div, the columns shrink so they the table fits in the div. It appears one can use widthShrink: 0 to prevent column shrinking (I have not tried this yet). Is it possible to specify widthShrink for all columns? I am creating the table from an existing table, and hence do not specify columns and data manually.
Also, is it possible to prevent the scrollbar on the table div when the table gets wider than the containing div. I would prefer that the user scroll the entire page to see the table (instead of just the table div).
Thank you.
You are using the wrong layout mode if you want the columns to overflow the table, fitColumns is specifically designed to fit the columns to the table. the fitData layout mode will allow the columns to overflow the table naturally. You can set widthShrink: 0 on all the columns, but at that point you are essentially disabling the layout mode anyway.
There is no built in feature for allowing external scrolling of the table. The table is based in a div and so will take up 100% the width of its parent element.
It will then either handle scrolling inside the table or resize the columns to fit depending on how your table is configured
You could make some CSS tweaks to allow this form of display but it may cause the table to malfunction under certain circumstance, depending on your configuration.
You would need to include the following CSS after the tabulator style sheet has been included:
.tabulator, .tabulator-header, .tabulator-tableHolder{
overflow:visible !important;
}
But essentially at that point you may be better off just using a standard HTML table as you seem to be disabling a lot of the features that you would use Tabulator for.
Tabulator offers a wide range of options to programmatically filter data, however I could not find a way to render on the page the dropdown and textbox used to actually filter data on the table.
It seems the only option that render a filter element on the Table is: headerFilter.
It looks weird that I have to create dropdown and searchbox myself?
Here is the link to their page dealing with Filters: http://tabulator.info/docs/4.1/filter
Please advise, thank you
You can use any of tabulators Editors as header filters
The Examples Page contains a fully working example of a table with a selection of header filters including text boxes and select elements
in the column definition you just have to use the headerFilter property, in this case we also use the headerFilterParams option to make the select element populate from the names in the column:
{title:"Name", field:"name" headerFilter:"select", headerFilterParams:{values:true}}
or for a simple input element
{title:"Name", field:"name" headerFilter:"input"}
I'm trying to adjust the table row height on a tabulator table. I'm trying to make the rows taller to make it easier to interact with for users on touchscreen devices.
I'm not finding anything in the documentation, and I haven't been successful adjusting the css. What is the proper way to make the rows taller? I'm trying to use Apple's suggestion of a 44px minimum.
You can do this in CSS by adjusting the cell padding, which by default is 4px
.tabulator-row .tabulator-cell{
padding:8px 4px;
}
Make sure to include this after the tabulator stylesheet
DataViews really provide almost everything I want in Xpages views EXECPT that I cannot control how extra columns appear. They are always right aligned. Is there a way to make them left aligned? I don't want a tremendous amount of space between the summary column and the extra columns.
The column sizing seems in that way, because the width of the Summary columnn is set by renderer (100% for usual dataview).
If you could remove that width: 100% style, the sizing of column would be usual.
There are a couple of ways to do that but neither is elegant.
Using CSS will not be a nice technique, but it will work. Since we can't address that specific column with a class name and width style is inline, we can define myRowStyle as the rowStyleClass for our dataview control and use the following rule:
tr.myRowStyle td { width: auto !important; }
Now, we will consider some problems of course. Any inline or CSS definition for other columns will be overridden by this rule. Also if you use any table within these columns, they will be effected too.
You can define a more specific selector for minimum side effect, but this will not work for older browsers (e.g. IE8):
tr.myRowStyle > td:nth-child(2) { width: auto !important; }
Alternative way is to write a short dojo script which finds the second TD within every row and remove width property. You might put such as a script just after the data view. For browsers with a slow connection might see a flickering on rendering stage for this case.