Is it possible to use ReactTabulator with autoColumnsDefinitions? - tabulator

I am moving my Tabulator table from vanillajs to react and when I plug things into ReactTabulator it only works when I explicitly pass columns props. Is it possible to use ReactTabulator with autoColumnsDefinitions as in vanillajs version?
Here is a code sandbox
https://codesandbox.io/s/silly-mestorf-phs7vc?file=/src/MyTabulator.js

Related

Vuetify use v-pagination style on v-data-iterator

I display multiple v-card on my page so I want to set a pagination. I looked for v-pagination but with this component I can't work with my json data (or I didn't understand).
So I see v-data-iterator that I can send json data and I can see the pagination and sort.
But I want to use the v-pagination to replace the default pagination of the v-data-iterator.
It is possible or I have to build all the javascript logic to do my pagination with v-pagination ?

emptyItemClass for Kendo UI Sortable for Angular

I am probably missing something basic but I cannot seem to get emptyItemClass to be applied to a kendo-UI sortable component for angular 2.
I have also tried using emptyItemStyle, and get the same result.
<kendo-sortable [data]="viewColumns" itemClass="itemClass" emptyItemClass="emptyItem" activeItemClass="activeItemClass"
[emptyText]="'No columns selected'" (dragEnd)="doneDragging($event)">
In this above code snipit itemClass and activeItemClass work, but emptyItemClass does not.
Here is a StackBlitz of my problem
You need to remove the brackets in your example and also use ViewEncapsulation.
Working StackBlitz

kendo angular 2 grid rtl header issue

while using the angular 2 grid in RTL, the fields are aligned correctly, but the header fields are not, both the content and the fields themselves.
you can do an easy test - just use the regular grid, and add dir="RTL" in the HTML tag,
unless I am missing something and I need to add something else?
thanks
The Grid component officially doesn't support RTL mode yet. You can keep track for the state of readiness of the packages here - https://github.com/telerik/kendo-angular/issues/96

How to manipulate embeded svg node using react?

I got in trouble during developing react. I use
<img src="example.svg">
Or using module 'react-inlinesvg' to embed the svg
<Isvg src="example.svg" wrapper={React.DOM.div}>
i want to manipulate the<g>node of the svg file directly in react, add and remove class(ps: it's quite easy in JQuery). I tried to get the ref of the element but failed. what should i do?
There are 2 options:
Use some kind of query selectors;
User react for writing SVG;
I would recommend you using 2nd approach. If you want to manipulate your own SVG, you can just write them in React as a component and work as you work with other React components.
Here you can see a list of supported elements in React.

Resolving CSS property for node

maybe my google-fu is just letting me down today, but i have not been able to find a way to resolve arbitrary properties of nodes in order to obtain a style attribute. For instance, I'd like to be able to ask a node 'What is your value (if any) for -fx-fill?'.
A simple application example: I'd like to build a custom legend for a chart. To do so, I'd have to ask a rendered node for their fill property. I could, of course, use my knowledge of the default-colorN classes and simply look up the fill, but it feels like this would be a very bad approach as is violates the whole idea of CSS.
Thanks in advance.
BTW: JavaFX version is 2.1
I'd like to be able to ask a node 'What is your value (if any) for -fx-fill?'
There is no public API for that yet. It is planned to add such an API in a future release.
See RT-17293 CSS Style Object Model in Java.
For the 2.0 and 2.1 release, you could probably find the information using undocumented, deprecated impl_ methods, but I wouldn't advise that.
For now, I'd advise just using css chart styling where-ever you can and supplementing it with a sprinkling of dynamic node.lookup() code where it is impossible to achieve the styling using css.

Resources