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.
Related
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;
I want Tabulator to perform all the pagination for me locally but want to provide my own custom pagination controls. If set the footerElement to my custom pagination panel Tabulator displays it correctly but does not page the data. I have to also set these additional properties for it to page the data correctly:
pagination: 'local',
paginationSize: 25
However, with these additional properties set, it displays both my custom pagination panel as well as Tabulators own implementation.
Is there a way of achieving what I need?
I am using:
"react-tabulator": "^0.13.1"
"tabulator-tables": "^4.7.1"
Alternatively, is there a way to include a rows indicator within the Tabulator pagination that displays something like:
1-25 of 80
The above indicates that we are displaying rows 1 to 25 out of a total of 80 rows.
You would need to replace the table footer with your own element using the footerElement option:
var table = new Tabulator("#example-table", {
footerElement:"<div class='table-footer><button>Custom Button</button></div>", //add a custom button to the footer element
});
Checkout the Footer Element Documentation for full details
Alternatively you could use a little CSS to hide the table footer by setting the .tabulator-footer class to display:none;
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"}
Is it possible to force the user to select only one value from a filter ?
For a radio button filter as below, is it possible to remove the buttons all & none and make sure that only one Choice is selected ?
you cannot change the existing filter features or functionality without developing a custom extension for a new filter control.
that said, you can certainly emulate a filter using what's called a Property Control and a Data Limiting Expression. for single selection, you're stuck with either a Dropdown control or a Listbox (single select) control.
you would need to...
create a Text Area Visualization on the page somewhere
insert a Listbox or Dropdown Property Control into the Text Area Visualization
create a Document Property with the same data type as your filter column and associate it to the Property Control. you can set this to Unique Values in Column or write in your own Fixed values.
open the Properties dialog on the visualization you'd like to filter and navigate to the Data page
scroll down to Limit Data Using Expression and use an expression like [MyFilterColumn] = "${MyDocumentProperty}" (quotes are required for string values; if numeric then omit quotes)
Please add this CSS in the HTML page of the spotifre to remove all and none
.ColumnFilter .sf-element-filter-item:last-of-type { display:none; }
.ColumnFilter .sf-element-filter-item:first-of-type { display:none; }
Another way to force the users to select one option is to add a Show/Hide in the visualization like this: Hide if UniqueCount([Field]) is greater than 1
I'm having this categorized view displayed in a view panel where the category column itself is not shown. Instead I'm displaying a combobox above the viewPanel where users can select from all the categories available (see screenshot below). The combo is bound to a scopeVariable and is refreshing the viewPanel onChange. The viewPanel has a computed categoryFilter reading from the same scopeVar. That all works nicely.
Now I also have implemented an additional wildcard (*) value in the selection list which (if selected) programmatically sets the cat filter to NULL. This way I'm forcing the viewPanel to show all entries. Again, this works fine, but with the drawback that now the view is showing empty rows where the category entries would be shown normally (in the screenshot you see empty rows above each entry, with 2 entries for the category "edcom GmbH" obviously belonging to the same category; those aren't separated by an empty row):
One way to at least hide those empty rows would be through means of css coding. But I would prefer those rows not being rendered at all.
Can this be done at all using a viewPanel, and how? Or do I have to use other controls like a repeat or a dataTable maybe?
Thanks in advance,
Lothar
One "hack" (an ugly one I admit) would be to change your categorization column from Firma to Firma:"--All--" or Firma:"*" and then instead of setting the category filter to NULL you set it to "--All--" (or "*").
The double category hits the indexer, but should do what you need.
Obviously there's no easy way. So meanwhile I'll stick to this css-style solution:
In the view panel und All Properties - data I set var = "entry". Then, under All Properties - styling I set a programatic value for the rowClasses property:
if(entry.isCategory()){
return "rowStyleHidden";
}
return "";
The style class "rowStyleHidden" hides those rows using
display: none;
Don't know yet how this turns out performance-wise, I'll have to observe this once I implement it in a copy of the real database.
You can also switch to a none categorized view, by having the viewname calculated based on the value in combobox.