I have the interface shown in the image, and this interface contains several columns, and in the column "الاسم الثلاثي" I want to put an icon "FastBackwardOutlined" next to each name, but instead of placing an icon, I see the "[object][object]" table as shown in the image.
How can I solve the problem?
return data?.map((row: any) => {
return {
...row,
supervisoryDoctor:
row.supervisoryDoctor?.label,
trinomialName:
`${<FastBackwardOutlined />}` + row.trinomialName
};
});
You cannot put it in a string.
You could use
trinomialName: (<React.Fragment>
<FastBackwardOutlined /> {row.trinomialName}
</React.Fragment>)
Related
I am replacing an old program for template-merging with docxtemplater and am trying to recreate the old programs prefix functionality.
I want the line removed if all prefixed tags ({$tag}) on that line are undefined.
The issue being that if all the tags on that line are undefined docxtemplater still creates a blank line.
All the examples I have found online tend to reference inverted-sections or rawtags, which both seem to be designed for a single tag per line opposed to multiple tags side by side.
I have looked into using rawtags and writing a custom-parser / nullGetter. However I am still none the wiser to removing the blank line.
I am using:
const options = {
paragraphLoop: true,
linebreaks: false,
parser: function(tag) {
return {
get(scope, context) {
console.log(tag);
console.log(scope);
console.log(context);
if (tag[0] == "$") {
tag = tag.substr(1); // needs to then remove line break
}
return scope[tag];
}
}
},
nullGetter: function nullGetter(part, scopeManager) {
if (!part.module) {
return "";
}
if (part.module === "rawxml") {
return "";
}
return "";
}
};
doc = new Docxtemplater(zip, options);
The prefix in the program I am replacing acts as follows:
data:
existingtag: EXISTINGTAG
Template.docx:
1 text above
{$existingtag}{$nonexistingtag}
text below
2 text above
{$existingtag}{$existingtag}
text below
3 text above
{$nonexistingtag}{$nonexistingtag}
text below
old program produced (What I want to produce)
1 text above
EXISTINGTAG
text below
2 text above
EXISTINGTAGEXISTINGTAG
text below
3 text above
text below
my docxtemplater produces (extra line in example 3):
1 text above
EXISTINGTAG
text below
2 text above
EXISTINGTAGEXISTINGTAG
text below
3 text above
text below
I'm the creator of docxtemplater and I don't think that there is a way to do what you want to achieve without taking a lot of time to handle this case.
The problem is that the tags such as :
{xxx}{yyy}
have access only to the text that they are in, but they cannot have any effect ouside of that text, so it is not possible to remove a paragraph conditionnally.
There is one tag that has access to the whole paragraph, that is the raw xml tag, prefixed by a "#", like this :
{#raw}
It is used to add rawXML and if the raw value is an empty string, than that paragraph will be removed.
Edit : I have actually worked on a module back in the time to achieve quite similar functionnality, it is a paid module : https://docxtemplater.com/modules/paragraph-placeholder/
In Cypress, I'm trying to count how many elements (in this case how many buttons in li) contain text. When using "contains", the number of returned items is always equal to one because "contains" only gives the first item in the document containing the search text.
cy.get('li')
.contains('button', 'Submit')
.its('length')
.then(elLength => {
// I want to test here the number of all buttons in li elements containig word 'Submit'
}
Of course, this doesn't work that way, because elLength is always 1 (or 0 if no items found).
Is there any other method in Cypress that can return all elements with text, and I can count them?
Cypress get() uses the same selectors as jQuery. You can therefor use :contains to get all elements containing a text.
As Cypress contains() only includes visible DOM elements, you have to add :visible to get the same kind of behaviour.
To make sure only one visible button contains "Submit":
cy.get('button:visible:contains("Submit")').should('have.length', 1);
To make sure only one visible button inside a "li" element contains the text "Submit":
cy.get('li button:visible:contains("Submit")').should('have.length', 1);
To count the "li" elements that contain one or more visible "Submit" buttons:
cy.get('li:has(button:visible:contains("Submit"))').should('have.length', 1);
If you know the right amount of buttons that need to have that label, you could try:
cy.get('li').then($el => {
cy.wrap($el).find(".button").then($els => {
expect($els.filter(index => $els.eq(index).is(':contains(Submit)'))).to.have.length(your_amount);
})
I am trying to get my text to wrap around and display in multiple lines in Office UI Fabric's DetailsRow. At the moment some of my rows that have long text go off the screen, and I would like them to wrap around so the user does not have to scroll to read the entire row.
This is my GroupedList
<GroupedList
items={this._items}
onRenderCell={this._onRenderCell}
groups={this._groups}
selectionMode={SelectionMode.none}
compact={true}
/>
This is my render method for each cell.
_onRenderCell = (nestingDepth, item, itemIndex) => {
return (
<DetailsRow
columns={this._columns}
groupNestingDepth={nestingDepth}
item={item}
itemIndex={itemIndex}
selection={this._selection}
selectionMode={SelectionMode.none}
onClick={() => this.insertComment(item.key, item.link)}
/>
);
};
Any ideas on how to make the text wrap? I am a beginner when it comes to styling.
If you have specific columns whose text are known to require more than "1 line" of text, you can use the isMultiLine property on the column. This is the example that sets isMultiLine to true for a column to wrap the text, which in turn enlarges the height of the corresponding row: "DetailsList - Variable Row Heights".
I am introduced to react/redux/sagas/redux-form web application development. I used react-bootstrap-table-next in order to display data in a table format.
It has two columns as Title, Description however data for Title column is a long string data.
foo1,foo2,foo3,foo4,foo5,foo6,foo7 bar
And the problem I am having is it overflows or occupies cell/row under Description so that data under Description column is masked.
I tried something like this but it didn't make a difference.
const rowStyle = (row, rowIndex) => {
return { whiteSpace: 'pre-line'; };
};
<BootstrapTable data={ data } columns={ columns } rowStyle={ rowStyle } />
What would be the way to wrap this long string so that it can be contained within fixed width of cell under Title column?
[update]
Found an answer with following css instead.
return { overflowWrap: 'break-word' };
You can do it by providing certain styling in your tag.
<BootstrapTable data={data} bodyStyle={ {width: 500, maxWidth: 500, wordBreak: 'break-all' } }>
I'm using ui-grid and the first column have to be pinned on the left. When the user hovers on one row, I want to highlight the entire row, which is the logical thing to do.
The problem is that ui-grid creates two distinct elements, one for the pinned column and the other on for the "regular" ones. So I don't know how to highlight the entire row at once, and solutions with CSS don't work.
.ui-grid-row:hover .ui-grid-cell {
background-color: red;
}
Plunker here: http://plnkr.co/edit/HPxrc68JNMqyp4G9xLFA?p=preview.
Do you know how to do that ? Ideally just with ui-grid settings and CSS.
Thanks!
I solved it!
I used a row template that grabs the row id, defines ng-mouseover and ng-mouseout functions that fills the background for all the cells in the row. For whatever reason I had to wrap the entire template in a div, simply adding something to the class of the template broke the entire table.
Content of the rowTemplate:
<div class="row-uid-{{row.uid}}">
<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid"
ng-mouseover="grid.appScope.onRowHover(row.uid);"
ng-mouseout="grid.appScope.onRowOut(row.uid);"
ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'"
class="ui-grid-cell"
ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader}"
role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}"
ui-grid-cell>
</div>
</div>
Added functions in the controller:
$scope.onRowHover = function (rowUid) {
_.each(angular.element('.row-uid-' + rowUid + ' .ui-grid-cell-contents'), function (row) {
angular.element(row).css('background-color', 'red');
});
};
$scope.onRowOut = function (rowUid) {
_.each(angular.element('.row-uid-' + rowUid + ' .ui-grid-cell-contents'), function (row) {
angular.element(row).css('background-color', 'white');
});
};