I'm using material-table version 1.69.2 which is latest now. I want to add a label to the search textfield displayed above the table.
Any help is much appreciated.
<MaterialTable
title=""
columns={[
{ title: "id", field: "CurrencyKey", hidden: true },
{ title: "Currency", field: "CurrencyName" },
{ title: "Currency code", field: "CurrencyCode" },
{ title: "Status", field: "IsDeleted" },
{ title: "Last modified", field: "DateModified" }
]}
data={data.list}
icons={tableIcons}
options={{
pageSize: 50,
pageSizeOptions: [50, 100, 150],
paginationPosition: "both",
searchFieldAlignment: "left",
search: true,
}}
localization={{
toolbar: {
searchPlaceholder: 'Search',
searchAriaLabel: 'Search here'
},
pagination: {
labelRowsSelect: 'Rows per page'
}
}}
/>
Related
I'm using a bootstrap table, but the design is not responsive, and every box has an overflow issue. I want to set overflow:'hidden, but I'm not sure where to put the CSS for the table, so I've provided the following code.
const columns = [
{
dataField: "service_description",
text: "SERVICE NAME",
},
{
dataField: "service_infra",
text: "INFRA",
sort: true,
},
{
dataField: "data_center",
text: "DATA CENTER",
sort: true,
},
{
dataField: "cloud_provider",
text: "CLOUD PROVIDER",
sort: true,
},
{
dataField: "infra_location",
text: "Infra Location",
},
];
return (
<div>
<BootstrapTable
bootstrap4
keyField="tenant_service_id"
data={serviceData}
columns={columns}
pagination={paginationFactory({ sizePerPage: 5 })}
/>
</div>
);
My problem is included in a screenshort.
How to define a custom filter-function for a column or cell? Just as an example, assume we have a text value and in the header there is a search input
How to tell the gridview to call a function
class FooComponent {
protected doSomeFilter (value: string, searchQuery: string) {
if (someConditions(value, searchQuery)) {
return true;
}
return false;
}
}
And I would expect to use it like this:
<dxi-column
dataField="myFooProperty"
[(customFilter)]='doSomeFilter'
></dxi-column>
But the GridView doesn't support customFilter method, and nothing similar. Do you know how to achieve such custom filtering in devexpress, looks very simple but I'm struggling with this for hours. Thank you in advance.
This example shows how to filter data using the filter panel. You can use its check box to enable/disable the current filter expression, and clicking on this expression opens the integrated filter builder. Note that changes made in it are reflected in the filter row and header filter, and vice versa, from (https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/FilterPanel/jQuery/Light/), Please see this:
$("#gridContainer").dxDataGrid({
dataSource: orders,
columnsAutoWidth: true,
filterRow: { visible: true },
filterPanel: { visible: true },
headerFilter: { visible: true },
filterValue: [["Employee", "=", "Clark Morgan"], "and", ["OrderDate", "weekends"]],
filterBuilder: {
customOperations: [{
name: "weekends",
caption: "Weekends",
dataTypes: ["date"],
icon: "check",
hasValue: false,
calculateFilterExpression: function() {
return [[getOrderDay, "=", 0], "or", [getOrderDay, "=", 6]];
}
}]
},
filterBuilderPopup: {
position: { of: window, at: "top", my: "top", offset: { y: 10 } },
},
scrolling: { mode: "infinite" },
showBorders: true,
columns: [{
caption: "Invoice Number",
dataField: "OrderNumber",
dataType: "number",
headerFilter: {
groupInterval: 10000
}
}, {
dataField: "OrderDate",
dataType: "date"
}, {
dataField: "SaleAmount",
dataType: "number",
format: "currency",
editorOptions: {
format: "currency",
showClearButton: true
},
headerFilter: {
dataSource: [ {
text: "Less than $3000",
value: ["SaleAmount", "<", 3000]
}, {
text: "$3000 - $5000",
value: [["SaleAmount", ">=", 3000], ["SaleAmount", "<", 5000]]
}, {
text: "$5000 - $10000",
value: [["SaleAmount", ">=", 5000], ["SaleAmount", "<", 10000]]
}, {
text: "$10000 - $20000",
value: [["SaleAmount", ">=", 10000], ["SaleAmount", "<", 20000]]
}, {
text: "Greater than $20000",
value: ["SaleAmount", ">=", 20000]
}]
}
}, {
dataField: "Employee",
dataType: "string"
}, {
caption: "City",
dataField: "CustomerInfo.StoreCity",
dataType: "string"
}, {
caption: "State",
dataField: "CustomerInfo.StoreState",
dataType: "string"
}]
});
Also see this: https://jsfiddle.net/mx1ovwp1/7/
$("#gridContainer").dxDataGrid({
dataSource: employees,
filterRow: {
visible: true,
applyFilter: "auto"
},
groupPanel:{
visible: true
},
searchPanel: {
visible: true,
width: 240,
placeholder: "Search..."
},
headerFilter: {
visible: true
},
paging: {
enabled: false
},
editing: {
mode: "form",
allowUpdating: true
},
columns: [
{
dataField: "Prefix",
caption: "Title",
width: 70
},
"FirstName",
"LastName", {
dataField: "Position",
width: 170
}, {
dataField: "StateID",
caption: "State",
width: 125,
lookup: {
dataSource: states,
displayExpr: "Name",
valueExpr: "ID"
}
}, {
dataField: "BirthDate",
dataType: "date"
}
]
});
Also refer to this link(dxDataGrid - How to implement a custom filter for a date field):
https://supportcenter.devexpress.com/ticket/details/t490195/dxdatagrid-how-to-implement-a-custom-filter-for-a-date-field
For the demo from DevExtreme, see this:
https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Filtering/jQuery/Light/
Below is what my table looks like in code. How can i control each column and make them have different widths?
{ id: 1, name: "Item 1", price: 100 },
{ id: 2, name: "Item 2", price: 102 }
];
const ProductList = props => {
const columns = [
{
dataField: "id",
text: "Product ID"
},
{
dataField: "name",
text: "Product Name"
},
{
dataField: "price",
text: "Product Price"
}
];
return (
<div style={{ padding: "20px" }}>
<h1 className="h2">Products</h1>
<BootstrapTable keyField="id" data={products} columns={columns} />
</div>
);
};```
You can use style prop
{
dataField: "name",
style: {
width: '90px'
}
text: "Product Name"
}
While surfing and searching for the solution, i stumbled upon their well documented doc page. Initially, it's the name react-bootstrap-table-next that was confusing me: it is well known as react-bootstrap-table2.
So, to control the width of a react-bootstrap-table-next table column, you should add classes props to style it externally or style to use inline style. Both props have the capability to take a callback function to better manipulate it.
The code will now look like below:
Here manipulating the width of the first column:
const ProductList = props => {
const columns = [
{
dataField: "id",
text: "Product ID",
style: {
width: '12em',
}
},
{
dataField: "name",
text: "Product Name"
},
{
dataField: "price",
text: "Product Price"
}
];
return (
<div style={{ padding: "20px" }}>
<h1 className="h2">Products</h1>
<BootstrapTable keyField="id" data={products} columns={columns} />
</div>
);
};
The storybook is pretty straight forward.
Just give the width to columns
const columns = [
{
dataField: "id",
text: "Product ID",
style:{'width' : '90px'}
},
{
dataField: "name",
text: "Product Name",
style:{'width' : '90px'}
},
{
dataField: "price",
text: "Product Price",
style:{'width' : '90px'}
}
];
I am having datagrid where in i have a custom cell template for a particular column.
I have also grouped the data with a particular column and i am displaying group summaries for some column at group footer.
My problem is the column with custom cell template which i havent assigned any group summary shows the cell template at footer.
Please check the codepen link to know the problem
https://codepen.io/aasiph/pen/qYBVMd
$("#gridContainer").dxDataGrid({
dataSource: orders,
keyExpr: "ID",
selection: {
mode: "single"
},
columns: [{
dataField: "OrderNumber",
width: 130,
caption: "Invoice Number"
}, {
dataField: "OrderDate",
width: 160,
dataType: "date",
}, {
dataField: "Employee",
groupIndex: 0
}, {
caption: "City",
dataField: "CustomerStoreCity"
}, {
caption: "State",
dataField: "CustomerStoreState",
}, {
dataField: "SaleAmount",
alignment: "right",
format: "currency"
}, {
dataField: "TotalAmount",
alignment: "right",
format: "currency"
},{
caption: "",
allowGrouping: false,
allowFiltering: false,
allowSorting: false,
cellTemplate: function (container, options) {
$('<div>View</div>')
.appendTo(container);
}
}
],
sortByGroupSummaryInfo: [{
summaryItem: "count"
}],
summary: {
groupItems: [{
column: "OrderNumber",
summaryType: "count",
displayFormat: "{0} orders",
}, {
column: "SaleAmount",
summaryType: "max",
valueFormat: "currency",
showInGroupFooter: false,
alignByColumn: true
}, {
column: "TotalAmount",
summaryType: "max",
valueFormat: "currency",
showInGroupFooter: false,
alignByColumn: true
}, {
column: "TotalAmount",
summaryType: "sum",
valueFormat: "currency",
displayFormat: "Total: {0}",
showInGroupFooter: true
}]
}
});
});
I dont want the cell template to be displayed in group footer.
cellTemplate: function (container, options) {
if(options.rowType == "groupFooter") return;
$('<div>View</div>')
.appendTo(container);
}
if(options.rowType == "groupFooter") return; solved the problem. Problem was resolved through DevExpress support.
I am trying to create form with some common inputs
<input type="text">
Now, I need to create textarea input because of more text input
<textarea>
I have not found any post about that. My code is bellow. Thanks for advices.
function(editor, type, name) {
editor.windowManager.open( {
title: 'Advert type: ' + name,
body: [
{
type: 'textbox',
name: 'target',
label: 'Target',
autofocus: true
},
{
type: 'checkbox',
name: 'blank',
checked: true,
label: 'Open in new tab'
},
{
type: 'textbox',
name: 'text',
label: 'Main text',
minWidth: '600',
},
{
type: 'listbox',
name: 'align',
label: 'Text align',
maxWidth: 100,
values: [
{
text: 'Left',
value: 'left',
icon: 'icon dashicons-align-left'
},
{
text: Right',
value: 'right',
icon: 'icon dashicons-align-right'
},
{
text: 'Cenetr',
value: 'center',
icon: 'icon dashicons-align-center'}
]
}
],
onsubmit: function(e) {
editor.insertContent('[widget widget_name="TinyMCEAdvWidget" type="' + type + '" target="' + makeTarget(e.data.target) + '" blank="' + e.data.blank + '" text="' + e.data.text + '" align="' + e.data.align + '"]');
}
});
}
I would like to display the main text as textarea col=3.
went through the same problem, you can use the following example:
{
type: 'textbox',
multiline: true
}