Comments (7)
Could you provide some example? I'm using tabulator in many projects and haven't encountered such issue. I can simply add some rows to the showcase example https://rjaros.github.io/kvision-examples/showcase/#/tabulator (with pagination) or the addressbook example https://rjaros.github.io/kvision-examples/addressbook-tabulator/ (without pagination) and the scrolling works fine for me in both cases (tested on Firefox and Chrome).
from kvision.
I have managed to resolve the issue by setting the renderVertical parameter of the TabularOptions() as below.
tabulator(
state.testCaseSectionCollection,
options = TabulatorOptions(
renderVertical = RenderType.BASIC,
height = "700",
layout = Layout.FITCOLUMNS,
...
)
)
I should mention that my table has cascaded tables using rowFormater. I also had set the height of the out table and the minHeight of the inner tables.
The only issue remaining now is that when I modify a record at the bottom (i.e changing redux state), the table scrolls to the top, which is not what I want.
from kvision.
What do you use to update the tabulator data? You should use repaceData()
method. This is used by KVision Tabulator component when subscribing to ObservableList and it works correctly:
https://github.com/rjaros/kvision/blob/master/kvision-modules/kvision-tabulator/src/jsMain/kotlin/io/kvision/tabulator/Tabulator.kt#L141-L145
from kvision.
I bind an outer div to the Redux store then assign the state variable containing the records collection to the tabulator as shown the skeletal code below
@OptIn(ExperimentalSerializationApi::class)
fun Container.testingView() {
val appScope = CoroutineScope(window.asCoroutineDispatcher())
div().bind(UatManager.uatStore) { state ->
// ...
tabulator(
data = state.testCaseSectionCollection,
options = TabulatorOptions(
renderVertical = RenderType.BASIC,
layout = Layout.FITCOLUMNS,
columns = listOf(
ColumnDefinition("Name", TestCaseSection::name.name, headerSort = false,),
// ...
),
)
)
// ...
}
}
from kvision.
Unfortunately this way you are destroying and recreating the Tabulator component on every state change. That's why you loose tabulator scroll position (and probably other state as well).
In my projects I generally move tabulator component outside of general state binding (the .bind
method) and just use it's own state binding functionality. It would be something like this:
div().bind(store) { state ->
// ... other components before tabulator
}
tabulator(store, { state -> state.collection }, options = ...)
div().bind(store) { state ->
// .. other components after tabulator
}
from kvision.
I'm trying to implement your suggestion above. I want to access a state variable inside a formatterComponentFunction of a column but I'm getting error "Unresolved reference: state".
from kvision.
Perhaps it will be enough to use store.getState()
? But for more dynamic state you can probably bind()
to the store variable inside formatterComponentFunction
.
from kvision.
Related Issues (20)
- trying to generate .pot files HOT 12
- overrides of `SimplePanel.AddAll` call refresh outside of a `singleRender` wrapper. HOT 1
- Allow KVService to have arguments with GET HOT 6
- Allow modifying response headers for Spring Boot and Micronaut apps HOT 1
- remove id parameter on get requests HOT 1
- Can't get data from Tabulator.RowComponent HOT 2
- Expandable/collapsible fieldset or panel HOT 2
- How to attch files using the Richtext Component HOT 7
- duplicated different word in kvision docs HOT 1
- did you consider to integrate kvision with ktor client? HOT 5
- can't make tabulator selectable with kvision v7.4.4 HOT 2
- My tabulator not selecting data HOT 5
- How to add more than one bottomCalc rows? HOT 2
- kvision gradle plugin not works well with Spring-Web-Flux HOT 4
- DropDown - call method instead of loading a route HOT 2
- Page loader how to. HOT 4
- Gantt and Calendar view of tasks HOT 7
- Issue integrating react-big-schedule HOT 3
- Make Alert Button Text Customizable HOT 1
- Incorrect checkbox size HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from kvision.