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
Related
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"}
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
I want to display a header title for a grouped table, but it is only displaying in one line. I am not sure if this is possible, but a table cell can be displayed in multiple lines, but I do not know if the header also.
Thanks in advance!
You can create your own custom view with as many lines as you like and implement tableView:viewForHeaderInSection: to return the custom view instead of tableView:titleForHeaderInSection.
I would like to conditionally format some columns based on other hidden columns. I used the method of cutting the columns that aren't too be displayed that was described here: http://social.msdn.microsoft.com/Forums/en-US/sharepoint2010general/thread/b9cee891-2a35-4420-bfbb-5ebf2f3fecfa
Unfortunately, the cut columns still appear when I use Inline Editing. Is there a way to hide these columns during inline editing too?
I cannot use the DataFormWebPart method described in the link.
Thank you
Inline editing shows the lists that are selected for the view. Modify the view to select only the columns you want to show. Here's a walkthrough of modifying a view from Microsoft:
http://office.microsoft.com/en-us/sharepoint-foundation-help/create-modify-or-delete-a-view-HA010377693.aspx#_Toc239586331
Could you create a custom content type and set the supporting columns to Hidden? this should keep them hidden when using inline editing.