I am building a lightning datatable with Aura component and I am showing data in this table from external system and I want to select one or more record so that I can import selected data in salesforce and after importing I want to to highlight that rows which had selected and imported in salesforce.
enter image description hereWhen you import data from external source than add an extra key value in json or js-object.,let's say isExternal which has value =''slds-theme_success" and use it is cellAttributes in lightningdatable, you can use cellAttributes in each column to highlight whole row.
Ex:-
Columns=[{ label: 'test', fieldName:'test' , cellAttributes:{class: { fieldName: 'isExternal' }} } ];
Related
I want to filter through listData that populates a react table. When an option is selected in a react select dropdown menu I want the table to only show the rows that have the changes in.
This is what I am trying to do:
``` data={_.filter(listData, (row) => {
return includes(row, row.has_changed);
})} ```
Currently when an option from the dropdown is selected it doesn't do anything.
I am not quite sure how to go about doing this? Any ideas? Please let me know if you need more code/ what code would help.
I have some user insert fields like title, date, time, and also a select dropdown option with some values. Below these fields, there is a text editing option using suneditor react, so when I click the select dropdown then automatically an HTML template with predefined value is inserted into this text editing filed.
Now I want to replace the predefined values of text editing field with user inserted date, time etc. Any resource, video, blog or advice?
FAQ: this is an invitation template integrated with mail config, where a dropdown list item is selected then predefined data are inserted into text editing field of sun editor, now need to change some value from user inserted input field.
I think you are probably looking for this:
setContents(contents)
Change the contents of the suneditor
Parameters:
Name Type Description
contents String Contents to Input
Where contents can be a state string...
import React, { useState } from 'react';
const [content, setContent] = useState("<span>Hello monster dev!!!</span>");
<SunEditor
name="content"
setContents={content}// <=
placeholder="Dev Monster"
defaultValue={content}
onChange={text => setContent(text)}
...
/>
Ref: http://suneditor.com/sample/html/out/document-user.html
I'm currently attempting to build an Airtable-esque filter component. I'm wondering if it is possible to use the useGlobalFilter hook to choose what columns to filter a table by programmatically. For example, Airtable implements table filtering using a component that lives outside of a given table's boundaries. Inside of this component, there is a dropdown menu to choose which column to apply a filterValue and a dropdown to choose the filterType for a given column. Based on react-table's documentation, it appears that useGlobalFilter is used to build filtering components that exist outside of the table. However, based on the documentation's code sandbox example, for filtering, it also appears that useGlobalFilter applies the filter value to all columns rather than to specific columns.
My question would be if it's possible to use useGlobalFilter's ability to create filtering UI outside of a table and have a way to select what columns to apply a filterValue & filterType, all from within the global filter?
If this is possible, would anyone be willing to provide tips or advice on the implementation? Please let me know if this task would be more suited for useFilter or another part of react-table's API.
I've provided a screenshot of Airtable's filter component as an example of what I'd like to build. Any feedback or advice would be much appreciated!
`const columns = React.useMemo(
() => [
{
Header: 'Group Name',
accessor: 'name',
// disableGlobalFilter: true
},
{
Header: 'Created',
accessor: 'sector',
disableGlobalFilter: true,
},
],
[]
)`
Add this in the column array inside the column where you want to disable global filter
I am displaying results from json in a react bootstrap table. On clicking compare, the results get filtered within the table. Now I wanted to reload and display the selected products in a different tabular format on clicking "Compare". The page should reload and then only the selected products should display in a table with headers vertically aligned. Can any one please help? Full code here - https://codesandbox.io/s/o4nw18wy8q
Expected output sample on clicking compare -
Probably you need to have a function inside your class to return two different views based the state of your filter status. If the filter status is not true, then display the normal view, if filter status is true, then display the view that you have just mentioned in the above view. As far as the design is concerned, you should be able to work out the table designs.
And when you hit clear, then you should set the filter status back to false
This is not a full working code. I am just giving you some idea.
Here is a codesandbox
https://codesandbox.io/s/2x450x3rqn
You can return a view from the function
onButtonClick = () => {
...
...
return <BootstrapTable
keyField="PartNumber"
selectRow={updatedData}
data={updatedData}
columns={updatedData}
/>
}
I have a column named id in my datagrid. I have set visible:false for the field since I don't want to display the field in the grid.
But then how can I get the value in id? any hope?
I am adding column as
columns.push({'sTitle':'id','visible': 'false'},{'sTitle':'name','visible': 'false'});
And I am retrieving the value in selected row as
this.$view.on("click",function(event){
selectedRow = event.target.parentElement;
var name = selectedRow.cells[0].innerHTML;
}
Here in click event I can't get the value of id as html is not generated for the field with visible:false. So I am searching for a method to access my id field.
You should use display:none property
-Edit:
In order to specify a custom css to your angular datagrid you should also specify the columns. Something like:
$("#gridContainer").dxDataGrid({
// ...
columns: ['CompanyName', 'ContactName', 'City', 'Country']
});
Here's the page I referenced to
Edit2:
Since you're trying to retrieve the value of the field I would recommend you to take a look to this answer