I'd like to display the columns that are defined in Tabulator with editor: false differently than the cells where editing is enabled.
I currently have columns defined like so:
this.tabAuthorizations = new Tabulator('#myTab', {
data: data,
columns: [
// 0
{
title: 'Id',
field: 'Id',
visible: false
},
{
title: 'User',
field: 'UserId',
formatter: (c) => {
return directReports.find(x => x.EmployeeListID === c.getValue()).EmployeeName;
},
editor: false
}, {
title: 'Type',
field: 'AuthTypeId',
formatter: c => {
return authTypes.find(x => x.AuthTypeId === Number(c.getValue())).AuthType;
},
editor: 'autocomplete',
editorParams: {
showListOnEmpty: true,
values: authTypes.reduce((a, c) => Object.assign( {[c.AuthTypeId]: c.AuthType}, a), {})
}
},
// etc
]
});
currently this generates cells with the same css classes applied.
<div class="tabulator-cell" role="gridcell" style="width: 542px; height: 28px;" tabulator-field="TaskListID" title="">My readonly field<div class="tabulator-col-resize-handle"></div><div class="tabulator-col-resize-handle prev"></div></div>
I would like to apply a -readonly or -editable class to the cells depending on the setting for editor: in the column definition. There doesn't appear to be a class applied either to the editable or non-editable cells by Tabulator itself, is there a better way of doing this other than in the cell formatter? I'd rather not have to define formatters simply to change the cell style.
you can add a CSS class to any column with the cssClass property in the column definition:
{
title: 'Type',
field: 'AuthTypeId',
cssClass: 'editable', //add custom css class to cell
}
Related
Using vue v2.5 with vueCLI 3 trying to have a v-data-table that on each row have a button, when this button clicked should make it appear as loading.
v-btn has loading property by default, really I don't know why is not working...
<v-data-table
:headers="headers"
:items="records"
#dblclick:row="editRowCron_jobs">
<template v-slot:[`item.actions`]="props">
<v-btn color="blue-grey" :loading="props.item.createloading" fab dark small #click="ManuralRun(props.item)">
<v-icon dark>mdi-google-play</v-icon>
</v-btn>
</template>
</v-data-table>
On the click method, I can read but not set the item
export default {
data() {
return {
headers: [
{ text: "id", value: "id", align: " d-none" },
{ text: "actions", value: "actions" }
],
records: [] //grid rows filled by API
}
},
methods: {
ManuralRun(item){
this.records[2].createloading=true; //even I set it like that, nothing happens
item.createloading = true; //property changed here - ok
console.log(item); //here outputs the clicked item - ok
},
so, according to this
the property MUST pre-exist in the array, that means, when we get the result from the API, we have to add the property as:
this.records = data.data.map(record => {
return {
createloading: false,
...record
}
})
I'm trying to setup an editable grid in Tabulator where I want to click on a cell to select it and then use arrow keys to move around the grid.
Then, if a key is pressed such as Enter, the value is able to be edited.
The current behaviour that I can't seem to disable is that as soon as you click on an editable cell it immediately opens the editor. Depending on the type of editor, the arrow keys might move to the adjacent cell or they might just interact with the editor (e.g. for a select editor, the up and down just moves up and down the list of options). If I hit Esc in the cell then editing stops as expected but the cell is not selected in any way so there is no way to move to an adjacent cell.
A very simple setup for the table is,
{
data: gridData,
layout: "fitColumns",
columns: [
{ title: 'Name', width: 100, field: 'name', editor: 'input', },
{ title: 'Age', width: 60, field: 'age', editor: 'number', },
{ title: 'Colour', width: 100, field: 'colour', editor: 'select', editorParams: {
values: ['red', 'green', 'blue']}
},
{ title: 'Progress', width: 80, field: 'progress', editor: 'number', },
],
pagination: "local",
paginationSize: 25,
paginationSizeSelector: true,
}
You can navigate inside your tabulator table with the following code:
keybindings:{"navUp" :"38","navDown" :"40","navLeft" :"37","navRight" :"39"},
Moreover you can asign double click inside column declaration in order to change your data.
{title:"Name", field:"name", cellDblClick:function(e, cell){
//e - the click event object
//cell - cell component
},
}
To prevent enter data with one click, just leave empty the corresponding callback.
Also take a look at this helpful documentation: Tabulator Key Bindings
and Tabulator Click events
I am new to react virtualized concepts and am using a RV Table decorated with Autosizer to display contents from my list. Currently, when I select a row, I dispatch an action to react-redux to update the state in store based on selected row data. This seems to work. I would also like to add a visual cue of "row selected" like a background color or text color and I have not been able to achieve that.
I tried using the rowRenderer function to set style but it does not seem to be working. Can someone share a simple example of how I can change the selected row on a RV table? When I select it once, I want the color changed and reselecting the same row should undo the color background.
Below is the working example to highlight row on selection. To deselect highlighted row, you can tweak logic in rowStyleFormat function
import React from 'react'
import { Column, Table } from "react-virtualized";
import "react-virtualized/styles.css";
class TestTable extends React.Component {
constructor(props) {
super(props);
this.state = {
index: -1,
data: [
{ 'rank': 1, 'player': 'Michael Jordan', 'points': 30 },
{ 'rank': 2, 'player': 'Wilt Chamberlain', 'points': 30 },
{ 'rank': 3, 'player': 'Bill Russell', 'points': 15 },
]
}
}
handleRowSelect(event) {
this.setState(
{
index: event.index
}
)
}
rowStyleFormat(row) {
if (row.index < 0) return;
if (this.state.index === row.index) {
return {
backgroundColor: '#b7b9bd',
color: '#333'
};
}
return {
backgroundColor: '#fff',
color: '#333'
};
}
render() {
return (
<Table width={500} height={300} headerHeight={20} rowHeight={30}
rowCount={this.state.data.length} rowGetter={({ index }) => this.state.data[index]}
onRowClick={this.handleRowSelect.bind(this)}
rowStyle={this.rowStyleFormat.bind(this)}
>
<Column width={100} label='Rank' dataKey='rank' />
<Column width={150} label='Player' dataKey='player' />
<Column width={150} label='Points' dataKey='points' />
</Table>
);
}
}
export default TestTable;
I want to export the kendo grid data into excel. I am using kendo dropdownlist as a template for some columns.
When i export it exports but it not show the text value for those columns but rather shows value for that fields.
This may not be the "best" solution but it worked for me. Basically I created a function that loops through and processes the row with the dropdown, using a switch statement to set the text based on the value (the data that comes through unfortunately only has the value, rather than the object).
Here is the markup for my grid:
<div id="grid" data-role="grid"
data-sortable=" {mode: 'single' , allowunsort:true }"
data-toolbar="[{template: this.model.getToolbar}]"
data-excel="{ fileName: 'export.xlsx', allPages:'true' }"
data-excel-export="model.curateExcelData"
data-columns="#string.Format(#"[
{{ title:'{0}', field: 'Column1', width:80 }},
{{ title:'{1}', field: 'Column2', width:80 }},
{{ title:'{12}', field: 'DropDownColumn',template: kendo.template($('#dropdown-template').html()),'width':80, sortable: false }},
]", CommonResource.Column1, CommonResource.Column2, CommonResource.DropDownColumn)"
data-bind="source: items"
data-editable="inline">
</div>
And the template:
<script id="dropdown-template" type="text/x-kendo-template">
<input data-role="dropdownlist"
data-auto-bind="false"
data-value-primitive="true"
data-text-field="Text"
data-value-field="Value"
data-bind="value: dropDownValue, source: dropDownValues"
style="width:65px" />
</script>
And here is the function that updates the values for the export (in my case I had a dropdown that was "Days" and "Weeks", which was the 12th column):
curateExcelData: function (data) {
var sheet = data.workbook.sheets[0];
$.each(sheet.rows, function (index, row) {
if (row.type == "data") {
switch (row.cells[12].value) {
case "D":
row.cells[12].value = "Days";
break;
case "W":
row.cells[12].value = "Weeks";
default:
break;
}
}
});
},
I want to change a color of grid line but without selecting it. It means I cannot use onStyleRow event as it reacts only for 'selected', 'odd' or 'over' event.
Any ideas?
thx
I found an updateRowStyles(idxRow) function, but no idea how to use it (how to pass syles etc.) and not sure if it will solve my problem
You cant change your style this way:
var layout = [
{ field: 'denumire', name: 'Denumire', width: '200px', height: '25px', styles: "color:red;" },
{ field: 'valoare', name: 'Valoare', width: '252px', styles: "color:red;"}];
or use formatter in layout grid
var layout = [
{ field: 'denumire', name: 'Denumire', width: '200px', height: '25px', formatter: function (value, rowIndex) {
return "<div style='height:110px;text-overflow:ellipsis;color:red;'>"+value+"</div>"
} },
{ field: 'valoare', name: 'Valoare', width: '252px',
formatter: function (value, rowIndex) {
return "<div style='height:110px;text-overflow:ellipsis;color:red;'>"+value+"</div>"
}}];