As far as i understand Tabulator will automatically insert a horizontal scrollbar, if the rows doesn't fit the table width.
This is my Tabulator Component:
<script lang="ts">
import {
Tabulator,
PageModule,
ReactiveDataModule,
ResponsiveLayoutModule,
ResizeTableModule
} from 'tabulator-tables';
import type { ColumnDefinition } from 'tabulator-tables';
import { onMount } from 'svelte';
export let data: any[], columns: ColumnDefinition[];
let tableComponent: HTMLElement;
onMount(() => {
Tabulator.registerModule([
PageModule,
ReactiveDataModule,
ResponsiveLayoutModule,
ResizeTableModule
]);
new Tabulator(tableComponent, {
data: data, //link data to table
columns: columns, //define table columns,
height: '500px',
pagination: true,
paginationSizeSelector: [10, 25, 30], //enable page size select element with these options
responsiveLayout: true,
reactiveData: true
});
});
</script>
<div bind:this="{tableComponent}"></div>
<svelte:head>
<link
href="https://unpkg.com/tabulator-tables#4.9.1/dist/css/tabulator.min.css"
rel="stylesheet" />
</svelte:head>
I have also tried it without responsiveLayout: false and renderHorizontal: 'virtual'.
Even if i enclose the Tabulator in a div with overflow-x: scroll nothing happens.
The horizontal scrollbar doesnt appear and only the content which fits on the screen is displayed.
The content expands, if i enlarge my Browser window.
REPL: https://svelte.dev/repl/5be4cdc48a694be793d5e4a0bdbd0f15?version=3.52.0
The whole point of the responsive module is that it dynamically hides cells.
The main problem is probably that you are using an outdated stylesheet (note the version: tabulator-tables#4.9.1). You should not be referencing unpkg.com for anything that is not purely demonstrational anyway.
With Vite you can just import the CSS directly from the package:
<script>
import 'tabulator-tables/dist/css/tabulator.min.css';
// ...
You can also import it from the <style>:
<style>
#import 'tabulator-tables/dist/css/tabulator.min.css';
</style>
(Vite will probably even automatically inline this.)
Without responsiveLayout it should scroll horizontally by default.
Related
I'm using Tabulator with Sveltekit.
This is my Tabulator-Component:
<script lang="ts">
import { Tabulator } from 'tabulator-tables';
import type { ColumnDefinition } from 'tabulator-tables';
import { onMount } from 'svelte';
export let data: any[], columns: ColumnDefinition[];
let tableComponent: HTMLElement;
onMount(() => {
new Tabulator(tableComponent, {
data: data, //link data to table
columns: columns, //define table columns,
pagination: true,
reactiveData: true
});
});
</script>
<div bind:this="{tableComponent}"></div>
<svelte:head>
<link
href="https://unpkg.com/tabulator-tables#4.9.1/dist/css/tabulator.min.css"
rel="stylesheet" />
</svelte:head>
The table renders fine, but the pagination and reactiveData option is not working and it says its "invalid":
[Warning] Invalid table constructor option: – "pagination" (client.js, line 1593)
[Warning] Invalid table constructor option: – "reactiveData" (client.js, line 1593)
What am I doing wrong?
Thanks in advance
M
Some of Tabulator's functionality is split into modules that have to be registered first, or you load everything (which will cause larger bundle sizes than necessary).
To register:
import { Tabulator, PageModule, ReactiveDataModule } from 'tabulator-tables';
Tabulator.registerModule([PageModule, ReactiveDataModule]);
(Available modules)
Or the full import:
import { TabulatorFull as Tabulator } from 'tabulator-tables';
Also, pagination is supposed to be a string: 'local' or 'remote'
I am working with #react-navigation/native 6 and using the headerLargeTitle option.
Depending on the screen size the padding of the title is changing. I could not find solution to adjust this through the documented APIs.
Any idea?
import { createNativeStackNavigator } from '#react-navigation/native-stack';
const PortfolioStack = createNativeStackNavigator();
const PortfolioStackScreens = (): JSX.Element => {
return (
<PortfolioStack.Navigator>
<PortfolioStack.Screen
name="Portfolio"
component={PortfolioScreen}
options={{
headerLargeTitle: true,
headerShadowVisible: false,
headerLargeTitleShadowVisible: false,
}}
/>
</PortfolioStack.Navigator>
);
};
Thank you
Whether to enable header with large title which collapses to regular header on scroll.
For large title to collapse on scroll, the content of the screen should be wrapped in a scrollable view such as ScrollView or FlatList. If the scrollable area doesn't fill the screen, the large title won't collapse on scroll. You also need to specify contentInsetAdjustmentBehavior="automatic" in your ScrollView, FlatList etc.
Only supported on iOS.
Detail
How can I change the default appearance of a button, so every time I create a button it will look the same? I understand how to i.e. use the color theme to change the i.e. "primary" color, and how to change the css for i.e. all button background colors.
But how would I go about if I for example want:
All buttons to automatically appear as "small" and "tile" by default?
Create your own component, e.g. like this one at src/components/XBtn.vue:
<template>
<v-btn
v-bind="$props"
small
tile
v-on="$listeners"
>
<slot></slot>
</v-btn>
</template>
<script>
import VBtn from 'vuetify/lib/components/VBtn/'
export default {
name: 'XBtn',
props: VBtn.options.props,
}
</script>
Then elsewhere in your app, you can import it:
<template>
<v-row>
<x-btn color="primary">Save</x-btn>
</v-row>
</template>
<script>
import XBtn from '#/components/XBtn'
export default {
name: 'SomeOtherComponent',
components: {
XBtn,
},
}
</script>
Or if you want it to be globally available without having to import it each time, you can register it in src/main.js like this:
// ... other imports ...
import XBtn from '#/components/XBtn'
Vue.component('x-btn', XBtn)
new Vue({
// ... main Vue instance config ...
})
The cool thing about doing it this way is that the XBtn component you derive from VBtn will have ALL of the same properties and events. XBtn will default to small and tile but you can still override these by doing something like: <x-btn large>. You basically use it the exact same way that you use VBtn.
I'm using the drilldown pie chart to drill down into children of a node, etc. The problem is that at some point, the children do not contain any data. Is there a way to display a message or something similar inside the chart instead of a white area (because of no series data) that informs the user that there is no more data to display?
Very good question! Inside of your JSON configuration you can define the nodata attribute.
var myConfig = {
type: "bar",
noData:{
text:"Empty Series",
backgroundColor: "#20b2db"
},
series:[
{
values:[]
}
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 400,
width: 600
});
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='myChart'></div>
</body>
</html>
You can even use background image like a loading screen. In the following example I'm displaying spongebob while I'm waiting for chart data to come in. So I initially render a chart with no series values and nodata defined. The image is displayed while the Ajax call happens asynchronously.
demo
Following the documentation of the YUI DataTable control i've inferred the following code:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<SCRIPT type="text/javascript" src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></SCRIPT>
<SCRIPT type="text/javascript">
// Create a new YUI instance and populate it with the required modules.
YUI().use('datatable', function (Y) {
// Columns must match data object property names
var data = [
{ id: "ga-3475", name: "gadget", price: "$6.99", cost: "$5.99" },
{ id: "sp-9980", name: "sprocket", price: "$3.75", cost: "$3.25" },
{ id: "wi-0650", name: "widget", price: "$4.25", cost: "$3.75" }
];
var table = new Y.DataTable({
columns: ["id", "name", "price"],
data: data,
// Optionally configure your table with a caption
caption: "My first DataTable!",
// and/or a summary (table attribute)
summary: "Example DataTable showing basic instantiation configuration"
});
table.render("#example");
});
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
The insulting thing is that the documentation says:
This code produces this table:
except that this code produces this table:
So obviously i'm missing something pretty fundamental about how to render a YUI data table. What is the correct way to render a YUI data table?
Q. How to render a YUI datatable?
Another page mentions including a <div>, changing my <BODY> from empty to:
<BODY>
<div class="example yui3-skin-sam">
<div id="simple"></div>
<div id="labels"></div>
</div>
</BODY>
but does not change the look of the control.
Add class="yui3-skin-sam" in body tag, table css is written corresponding to this class.
Move the <script>s to the bottom of the <body>, or at least after the <div> that will contain the DataTable. That will avoid a race condition where the scripts may be loaded before the DOM is set up.
render('#example') is telling the DataTable to render into an element with an id of 'example' The markup sample you included has a div with a class of 'example', then two divs with ids 'simple' and 'labels'. You need to make sure you're rendering inside a parent element with class yui3-skin-sam. If you tell a YUI widget to render into an element it can't find, it falls back to rendering it inside the <body>. You can fix this in a few ways:
add the class to the <body> tag instead of a <div> (not a bad idea, but you should still fix the render target selector)
use a render(?) target selector that matches an element on the page, such as render('.example'), render('#simple'), or render('#labels').
In any case, make sure your render target is inside an element with class="yui3-skin-sam"