Can I make dynamic table with area brick in pimcore? Something like this:
with possibility to change the rotation angle.
Can I change style, add class to tbody tag, or set table header in pimcore editables - table ?
You can do this with CKEditor and css's styling "transform: rotate(45deg)".
Related
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;
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 am creating a dojo data grid following Brad Balassaitis' excellent blog series. I want to prevent the user from resizing any columns.
I know that each column needs the attribute noresize=true, but I don't know where to put that in xpages. I have defined the width of each column using percentages, and that is working. I just don't want the users messing with the widths I have set. I am hoping to not have to programmtically define the grid if I can help it. Is there an easy way to add this attribute?
I want to place my fields, in an anchor layout, in the right. When I add a field with anchor: '50%' in this layout, it will be displayed like this:
How can I place it in the right.
This anchor layout is not meant for this kind of layout. Use a column or table layout instead.
The only way you could come close to achieving what you want with the anchor layout is to use a pixel based offset, which doesn't make sense since you are using percentages for the width of the fields.