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.
Creating a custom color scheme for a template is very easy in Tailwind CSS. You just modify tailwind.config.js, add your custom color palate, and use it just like Tailwind's ordinary classes. For example bg-brand-500:
theme: {
extend: {
colors: {
brand: {
'50': '#B0ECEC',
'100': '#A0E8E8',
'200': '#7FE1E1',
'300': '#5ED9D9',
'400': '#3DD1D1',
'500': '#2CB9B9',
'600': '#218C8C',
'700': '#165E5E',
'800': '#0C3131',
'900': '#010404'
},
}
}
}
Now I'm stuck at a way to make a multi-color template.
I'm sure you have all seen templates all over the web where you can choose red or blue for example and the entire template's color scheme changes.
How do you do that in Tailwind?
Update:
In other CSS schools, like SASS, you simply create another color variables file and dynamically load a different file using the regular <link href='/path/to/red/variables.css' />.
You can use CSS variables for that.
In your tailwind config, you create the brand colors as you did, but instead of hex color codes, you use for example 50: 'var(--brand-50)'. Then in your index.css you can add these variables to the base layer, like:
#layer base {
:root {
--brand-50: #B0ECEC;
}
.theme-red {
--brand-50: #BB0000;
}
}
Now, if you add the class .theme-red to your body, text-brand-50 will be red.
In this video of Tailwind labs it is fully explained. There is also explained how to deal with opacity, although since tailwind 3.1 there is an easier way of doing that.
Hope this helps.
You might use the tw-colors plugin.
Create your themes
const { createThemes } = require('tw-colors');
module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
plugins: [
createThemes({
light: {
brand: {
'50': '#B0ECEC',
'100': '#A0E8E8',
'200': '#7FE1E1',
'300': '#5ED9D9',
'400': '#3DD1D1',
'500': '#2CB9B9',
'600': '#218C8C',
'700': '#165E5E',
'800': '#0C3131',
'900': '#010404'
},
},
dark: {
brand: {
'50': '#321321',
'100': '#654654',
'200': '#987987',
'300': '#786541',
'400': '#aeeeee',
'500': '#786541',
'600': '#987987',
'700': '#165E5E',
'800': '#654654',
'900': '#321321'
},
}
})
],
};
Use your themes
<html class='theme-light'>
<div class="bg-brand-500">...</div>
</html>
You can then switch themes dynamically as you like, with a switch for example
I have a probem with three options while configuring Mathjax v.3 in my application. The minimal code to reflect the problem is an html file and two js file, one being tex-svg.js downloaded from github and the other being my configuration file for mathjax.
Content of the HTML file reads
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>title</title>
<script type="text/javascript" src="test_files/mathjax-config.js"></script>
<script type="text/javascript" src="test_files/tex-svg.js" async=""></script>
</head>
<body>
first we have $1+\tan(\alpha)^2=\frac{1}{\cos(x)^2}$, then we have $$\int_a^b f(x,\tau,\epsilon)\,dx$$ and last we would have<br>\begin{align}<br>\sin(x)<br>\end{align}<br>and then continue by going to the next line ...<br>... right here
</body>
</html>
and the content of the configuration file is as what follows
window.MathJax = {
options: {
renderActions: {
addMenu: [],
//checkLoading: []
}
},
loader: {
//load: ['[tex]/tagFormat']
},
tex: {
inlineMath: [ ["$","$"] ], // ["$","$"],["\$","\$"],["\(","\)"],["\\(","\\)"]
displayMath: [ ["$$","$$"] ],
processEscapes: true, // for \$ to mean a common dollar sign, not a math delimiter
//ignoreHtmlClass: 'tex2jax_ignore', // divs with class "tex2jax_ignore" are NOT to be rendered
//processHtmlClass: 'tex2jax_process' // divs with class "tex2jax_process" are to be rendered
//processEnvironments: true, // process \begin{xxx}...\end{xxx} outside math mode
//processRefs: true, // process \ref{...} outside of math mode
packages: {'[+]': ['tagFormat','includeHtmlTags','skipTags']},
skipTags: ["script", "style", "textarea", "pre", "code"], //their contents won't be scanned for math
includeHtmlTags: {br: '\n', wbr: '', '#comment': ''}, // HTML tags that can appear within math
digits: /^(?:[\d۰-۹]+(?:[,٬'][\d۰-۹]{3})*(?:[\.\/٫][\d۰-۹]*)?|[\.\/٫][\d۰-۹]+)/, // introduce numbers
tagSide: "right",
tagIndent: ".8em",
multlineWidth: "85%",
tags: "ams",
tagFormat: {
number: function(n){
return n.replace(/0/g,"۰").replace(/1/g,"۱").replace(/2/g,"۲").replace(/3/g,"۳")
.replace(/4/g,"۴").replace(/5/g,"۵").replace(/6/g,"۶").replace(/7/g,"۷")
.replace(/8/g,"۸").replace(/9/g,"۹");
}
}
},
svg: {
fontCache: 'global', // or 'local' or 'none'
mtextInheritFont: true, // required to correctly render RTL Persian text inside a formula
scale: 0.97, // global scaling factor for all expressions
minScale: 0.6 // smallest scaling factor to use
//matchFontHeight: true, // true to match ex-height of surrounding font
//exFactor: .5, // default size of ex in em units
//displayAlign: 'center', // default for indentalign when set to 'auto'
//displayIndent: '0' // default for indentshift when set to 'auto'
},
chtml: {
mtextInheritFont: true, // required to correctly render RTL Persian text inside a formula
scale: 0.97, // global scaling factor for all expressions
minScale: 0.6 // smallest scaling factor to use
//matchFontHeight: true, // true to match ex-height of surrounding font
//exFactor: .5, // default size of ex in em units
//displayAlign: 'center', // default for indentalign when set to 'auto'
//displayIndent: '0', // default for indentshift when set to 'auto'
//adaptiveCSS: true // true means only produce CSS that is used in the processed equations
}
};
The problem is with these options:
skipTags, includeHtmlTags, and tagFormat
any of them which I use, an error is written in console which says Invalid option as there is no default value. As far as I have learned, this error shows these are not loaded, but I don't know how to do so. Adding codes like load: ['[tex]/tagFormat'] gives another error when it cannot find the js file in a specific address, while MathJax3 is seemingly supposed to be a one single file solution.
Where am I wrong? and what's the solution?
Thanks in advance
There is an error in the documentation concerning the skipHtmlTags, includeHtmlTags and a few other options. They should be in the options sub-object, not the tex subject. Also, it is skipHtmlTags, not skipTags.
As for tagFormat, it is not included in the base tex-sag.js file, so you do need to load it separately. Since you have only copied the base tex-svg.js file, and no the tagFormat component, that will lead to a load failure (the message you are getting). It would be better if you installed the complete MathJax distribution if you are hosting your own copy, otherwise these kinds of load problems can occur. Otherwise, you might want to use the tex-svg-full.js file, which includes nearly all the TeX extensions.
Here's a working example, using the CDN, and tex-svg.js, while loading the tagFormat extension by hand (so the initial download is smaller).
<script>
window.MathJax = {
options: {
renderActions: {
addMenu: []
},
skipHtmlTags: ["script", "style", "textarea", "pre", "code"], //their contents won't be scanned for math
includeHtmlTags: {br: '\n', wbr: '', '#comment': ''}, // HTML tags that can appear within math
},
loader: {
load: ['[tex]/tagFormat']
},
tex: {
inlineMath: [ ["$","$"] ],
displayMath: [ ["$$","$$"] ],
processEscapes: true,
packages: {'[+]': ['tagFormat']},
digits: /^(?:[\d۰-۹]+(?:[,٬'][\d۰-۹]{3})*(?:[\.\/٫][\d۰-۹]*)?|[\.\/٫][\d۰-۹]+)/, // introduce numbers
tagSide: "right",
tagIndent: ".8em",
multlineWidth: "85%",
tags: "all",
tagFormat: {
number: function(n){
return String(n)
.replace(/0/g,"۰")
.replace(/1/g,"۱")
.replace(/2/g,"۲")
.replace(/3/g,"۳")
.replace(/4/g,"۴")
.replace(/5/g,"۵")
.replace(/6/g,"۶")
.replace(/7/g,"۷")
.replace(/8/g,"۸")
.replace(/9/g,"۹");
}
}
},
svg: {
fontCache: 'global', // or 'local' or 'none'
mtextInheritFont: true, // required to correctly render RTL Persian text inside a formula
scale: 0.97, // global scaling factor for all expressions
minScale: 0.6 // smallest scaling factor to use
}
};
</script>
<script id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-svg.js">
</script>
Testing math:
\begin{align}
\sqrt{x^2<br>
+1}
\end{align}
I've left in the skipHtmlTags and includeHtmlTags options, even though these are the defaults and they could be removed. Also, the tagFormat.number function receives a number not a string, so you need to create the string from it before you can do the substitutions.
Finally, this example has pointed out that there is a timing issue between the tagFormat extension and the ams tag format (which isn't available until after the ams extension is registered), so I've used the all tagging for now. I will submit a bug report for that.
Edit
Here's a version that includes a patch that overrides the tagFormat extension with one that handles the ams tags properly. You can use it for now until MathJax is fixed.
<script>
window.MathJax = {
loader: {
load: ['[tex]/tagFormat']
},
startup: {
ready: function () {
var Configuration = MathJax._.input.tex.Configuration.Configuration;
var TagsFactory = MathJax._.input.tex.Tags.TagsFactory;
var tagFormatConfig = MathJax._.input.tex.tag_format.TagFormatConfiguration.tagFormatConfig;
var TagformatConfiguration = MathJax._.input.tex.tag_format.TagFormatConfiguration.TagformatConfiguration;
Configuration.create('tagFormat', {
config: function (config, jax) {
var tags = jax.parseOptions.options.tags;
if (tags !== 'base' && config.tags.hasOwnProperty(tags)) {
TagsFactory.add(tags, config.tags[tags]);
}
return tagFormatConfig(config, jax);
},
configPriority: 5,
options: TagformatConfiguration.options
});
return MathJax.startup.defaultReady();
}
},
tex: {
packages: {'[+]': ['tagFormat']},
tags: "ams",
tagFormat: {
number: function(n){
return String(n)
.replace(/0/g,"۰")
.replace(/1/g,"۱")
.replace(/2/g,"۲")
.replace(/3/g,"۳")
.replace(/4/g,"۴")
.replace(/5/g,"۵")
.replace(/6/g,"۶")
.replace(/7/g,"۷")
.replace(/8/g,"۸")
.replace(/9/g,"۹");
}
}
}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-svg.js">
</script>
Testing math:
\begin{align}
\sqrt{x^2<br>
+1}\qquad \text{with AMS number}
\end{align}
$$
\sqrt{x^2+1}\qquad\text{with no number}
$$
I've removed the options that don't play a role in this in order to make this example a bit cleaner.
Firstly, love the product!
Secondly, is it possible to change the expand and collapse icons for tree module within Tabulator? It would really help with the consistency of my project if I were to instead use the block arrows (Alt 16 & Alt 30).
I've already manipulated the CSS to the remove the border, etc.
The data and columns are substituted within the software package I am compiling this within.
var table = new Tabulator("#example-table", {
height:400,
data: [ **TableData** ]
dataTree:true,
dataTreeStartExpanded:true,
dataTreeBranchElement: false,
dataTreeChildIndent: 9,
dataTreeCollapseElement: !1,
dataTreeStartExpanded: !1,
layout:"fitColumns",
columns:[ **ColumnData** ],
rowClick:function(e, row){ //trigger an alert message when the row is clicked
alert("ID " + row.getData().id + " Selected");
},
});
I am pairing this with
<link href="dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>
You can use the dataTreeExpandElement and dataTreeCollapseElement setup options for this in your table constructor
var table = new Tabulator("#example-table", {
dataTree:true,
dataTreeCollapseElement:"<span>►</span>",
dataTreeExpandElement:"<span>▼</span>",
});
Full details on how to use this feature can be found in the Data Tree Documentation
Checking the source code for Tabulator, dataTreeCollapseElement and dataTreeExpandElement are either looking for a string or DOM element. Try specifying an empty element that won't show:
dataTreeCollapseElement: '<i/>',
dataTreeExpandElement: '<i/>',
Given the following javascript code :
var layoutFull = new YAHOO.widget.Layout({
units: [
{
position: 'left',
header: 'Right',
width: 300,
resize: true,
collapse: true,
scroll: true,
body: 'right1',
animate: true
},
{
position: 'center',
body: 'Da center...'
}
]
});
layoutFull.render();
I can have a full layout with a collapsible left pane. But there is a fine line between left and center parts. I would like to be able to drag this line for resizing both left and center part as in this example : http://developer.yahoo.com/yui/examples/layout/page_layout_source.html.
Which property should I enable in the layout configuration ? Looking at sample or the API doc didn't give me any luck.
I'm wondering if the following two libraries need to be included ...
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="../../build/resize/resize-min.js"></script>
Without 'seeing' the html, its rather hard to guess. Some 'magic' might occur by adding these two. Just a hunch. :)