Using chrome: 72.0.3626.96
What is the correct approach to configure the styles on a Tabulator table such that when printing, a table that spans multiple pages will have its header repeated on each page ?
(Suppose there are no other elements in the body of the html other than the Tabulator elements.)
This is not currently available on Tabulator. it is on the roadmap to ad advanced print styling, but this wont be for a while yet
Related
I am trying to create a table using the Tabulator library, and I'm encountering a problem with accessibility.
Using any of the examples on the Tabulator site which have column sorting, I need to tab into the column and use the space bar or enter key to sort the column (simulating a click or a touch). However, I am unable to use keyboard to access the columns - it appears that only a mouse click is possible.
Are there any settings when declaring my columns that I can use to gain keyboard accessibility to the columns?
This functionality is not built in at present, If you would like to see the functionality added to the library please create a Feature Request
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"}
In Tabulator, is it possible to generated a table that has Headers Left-Aligned? See screenshot for example:
This is not possible i'm afraid, Tabulator currently only supports vertical columns
I have developed a list in SharePoint. While entering new item in it, like name, if I keep on typing it gets spread over a line making the width of cloumn spread over page. I want to limit the width of site column so as the column's value spreads over multiple lines instead of spreading over one. How can I do this setting?
This is not a setting you can configure in SharePoint. You will need to write some custom code using css and possibly javascript that will set the width of the column. You can make a change like this in SharePoint Designer.
You must use min-width (CSS) in your block.
You have to create custom XSLT for this. There you have loop all the column and need to specify the overflow:auto, hidden,.. CSS property. So it automatically get effect based on your internal name of the field.
So whereever you have the field it automatically get affected. If it for one single view you can use JavaScript to achieve this but this is not right way to do.
The data you are entering can be displayed in many ways. Today in a table format, tomorrow in a dropdown etc. You should distinguish between:
limiting the amount of data that can be entered in a site column (can be done in SharePoint alone, when you design your list)
limiting the wrapping of the words in a table cell today or trimming the values in a dropdown tomorrow (can be done using HTML/CSS "nowrap" if you display the list values in a browser app, or differently if you show the values in a WinForms app)