I have two columns in my material-table.
Product
Product price
On first column (product) value change, I want to make second column value the price of product.
Price column is not editable. It is decided on what product I choose (1st column)
Columns:
const columns = [
{
title: 'Product',
field: 'product',
editComponent: props => {
return (
<Autocompleter
onChange={props.onChange}
/>
);
},
},
{
title: 'Price',
field: 'price',
editable: 'never'
}
};
Related
I have used vue-easytable plugin version 2.8.2 to display a table inside a Vue component. I have a problem of finding how to conditionally display a table column.
In a demo displayed in here when either of the "Row Radio" or "Row Checkbox" switches are switched on we can see a column is added to the demo table dynamically. So I think this feature/functionality should be there already in vue-easytable, but I couldn't find how to achieve this referring to the documentation.
Within my Vue component the columns array I pass to vue-easytable is as follows.
columns: [
{
field: "entity",
key: "c",
title: "Entity",
align: "left",
sortBy: "asc",
},
{
field: "version",
key: "d",
title: "Version",
align: "center",
},
{
field: "test_date",
key: "e",
title: "Test Date",
align: "center",
},
{
field: "score",
key: "f",
title: "Score",
align: "center",
},
{
field: "score_percentage",
key: "g",
title: "Score (%)",
align: "center",
},
{
field: "result",
key: "h",
title: "Result",
align: "center",
}
]
I want to show the "Entity" column when a condition is satisfied. What should I do to achieve that?
You can find the vue-easytable documentation here.
In the source code of the demo, the column is being added to the columns array like so:
if (this.enableRowCheckbox) {
columns.push({
field: "checkbox",
key: "checkbox",
title: "",
width: 100,
fixed: this.enableColumnFixed ? "left" : "",
type: "checkbox",
});
}
For your use case you might be better off setting the defaultHiddenColumnKeys option and/or the hiddenColumnsByKeys and showColumnsByKeys instance methods. See the link for examples.
Or you can use the cellStyleOption, like so:
cellStyleOption: {
headerCellClass: ({ column }) => {
if (column.field === "entity") {
return someCondition?'text-visible-class':'text-hidden-class';
}
},
bodyCellClass: ({ column }) => {
if (column.field === "entity") {
return someCondition?'text-visible-class':'text-hidden-class';
}
},
},
I am using Vuetify's datatable and all new entries a customer makes are put at the bottom. Is there a way I can reverse that order so that the newest entries are at the top without having to click the sort button?
template
<v-data-table
:headers="headers"
:items="orders"
:items-per-page="15"
class="elevation-1"
></v-data-table>
script
export default {
name: 'DataTableComponent',
data() {
return {
headers: [
{ text: 'Order Id', align: 'left', value: 'order_id'},
{ text: 'Customer', value: 'customer' },
{ text: 'Order Total', value: 'total', sortable: false},
{ text: 'Date', value: 'date' },
],
orders: this.$store.getters.getOrders
}
}
}
I have a table displaying search results with server side Pagination but when I click the columns, there is no sorting taking place and the server displays the results again for any of the column arrow clicks. Is there any way I can limit the pagination to take place only for the page arrows in the footer and then sorting to take place for the displayed results when i click the columns?
<q-table
dense
:title="Patient result"
:data="searchResultList"
:columns="columns"
:pagination="serverPagination"
row-key="name"
:no-data-label="noDataMessage"
:loading="loading"
#request="request"
>
data() {
return {
filter: '',
columns: [
{
name: 'patientId',
required: true,
label: 'patientId',
align: 'left',
field: row => row.patientId,
format: val => `${val}`,
sortable: true,
}
{
name: 'lastname', align: 'center', label: 'lastname', field: 'lastname', sortable: true,
},
{
name: 'firstname', align: 'center', label: 'firstname', field: 'firstname', sortable: true,
},
{
name: 'dob', align: 'center', label: 'dob', field: 'dob', sortable: true,
},
],
page: 1,
rowsInPage: 25,
};
computed: {
serverPagination() {
return {
sortBy: this.paginationObject.sortBy,
descending: this.paginationObject.descending,
page: this.paginationObject.page,
rowsNumber: this.patientSearchResults.count,
rowsPerPage: this.paginationObject.rowsPerPage,
};
paginationObject: {
sortBy: 'name',
descending: false,
page: 1,
rowsPerPage: 25,
methods: {
request(props) {
this.$store.dispatch('patientSearch/setPaginationObject', props);
},
Use sort-method. You can write a custom function where you can pass the rows(Not all but according to pagination i.e. if the selected page is 1 the rows will be 0-5 from your array. Here I'm guessing the default visible rows will be 5.)
Check out this API reference - https://quasar.dev/vue-components/table
In QTable API, you will find the details about this method.
by default how to select first item in list, without tapping it? below is the my view.
Ext.define('MyApp.view.TestList', {
extend: 'Ext.List',
xtype: 'testlist',
config: {
flex: 1,
enableSelection: true,
itemTpl: '{item}',
data: [
{item: 'item-1'},
{item: 'item-2'},
{item: 'item-3'},
{item: 'item-4'}
]
}
});
Ext.List has two methods that will help you:
list.select( record, keepExisting, surpessEvent );
list.selectRange( startRecordIndex, endRecordIndex, keepExisting );
In your case you can you use list.selectRange( 1, 1, false ); to select the second data record.
How to hide complete column in dgrid (gridFromHtml) based on some run time parameter?
Lets say if the value of parameter is true I should be able to display some column and if the value is false then I should be able to hide that same column.
Use grid.styleColumn(columnId, css):
var grid = new Grid({
store: store,
columns: [
{ id: "artist", label: "Artist", field: "Artist"},
{ id: "name", label: "Song", field: "Name"},
{ id: "gerne", label: "Genre", field: "Genre"}
]
}, "grid-placeholder");
// to hide column with id="name"
grid.styleColumn("name", "display: none;");
// to show it
grid.styleColumn("name", "display: table-cell;");
There is a dgrid extension called ColumnHider which allows you to pass in a column with a "hidden" property.
require([
"dojo/_base/declare", "dgrid/OnDemandGrid", "dgrid/extensions/ColumnHider"
], function(declare, OnDemandGrid, ColumnHider) {
var grid = new(declare([OnDemandGrid, ColumnHider]))({
columns: {
col1: {
label: "Column 1",
hidden: true
},
col2: {
label: "Column 2",
unhidable: true
},
col3: "Column 3"
}
}, "grid");
// ...
});
This will also give the user the ability to hide their own columns. You can set some columns to be unhidable, like column 2 above
You need to use toggleColumnHiddenState:
require([
'dojo/_base/declare',
'dgrid/OnDemandGrid',
'dgrid/extensions/ColumnHider'
], function (declare, OnDemandGrid, ColumnHider) {
var grid = new (declare([ OnDemandGrid, ColumnHider ]))({
columns: {
'id': {label: '#'},
'name': {label: 'Название'}
}
}, 'grid');
grid.toggleColumnHiddenState('name', true); // hiding
grid.toggleColumnHiddenState('name', false); // showing
grid.toggleColumnHiddenState('name'); // toggling column
});
Should think this will work
var grid = new dojox.grid.DataGrid({
store: dataStore,
structure: [{
name: "ID",
field: "id",
width: "100px"
}, {
name: "Values",
field: "values",
width: "100px"
}]
}, "myGrid");
grid.startup();
function showOrHideColumn(show, widget, index) {
var d = show ? "" : "none"
dojo.query('td[idx="'+index+'"]', widget.viewsNode).style("display", d);
dojo.query('th[idx="'+index+'"]', widget.viewsHeaderNode).style("display", d);
}
showOrHideColumn(false,grid,0);