why the antd table added `+ ` automaticlly, how to remove the `+` - reactjs

I am using antd "antd": "^3.26.3", to develop a app, now the table have a + like this:
I did not add any setting to add the +, why the + come out? what should I do to remove the +? this is my antd table source code:
<div className={styles.tableList}>
<StandardTable
rowSelection={{
type: 'checkbox',
...rowSelection,
}}
loading={loading}
data={data}
columns={this.columns}
selectedRows={[]}
rowKey="_index"
hideAlert
disablePagination={false}
expandIconAsCell={false}
expandIconColumnIndex={-1}
onChange={this.handleStandardTableChange}
/>
</div>
I have tried to add this config but still did not make the + disappear, what should I do to fix it?
expandIconAsCell={false}
expandIconColumnIndex={-1}

In antd Table component, + icon represents a row that can be expandable when clicked. By default, it is not expanded so when you clicked on + it will expand.
There are basically two cases in which + can appear in the rows of the table.
Using expandable api, expandable api allow us to render something things (data) by clicking + or anywhere in the whole row (this can be set by expandRowByClick as true). A common example for this case can be found here.
Using children property in the data prop. Example.
Even if children property has an empty array, it will still show the + icon and when it is clicked it will expand with some extra spaces but no data in it.
Note: You should not use both the ways in one antd Table. So, you always have to choose one way over another depending upon the use cases.
In your case, you have mentioned that you have children property in your dataset which is a boolean value and has a different purpose than the children property of antd table dataset.
As I have mentioned in my comments, you just need to alias the children property to some other name, maybe haveChildren when mapping your dataset to a custom dataset.

Related

React Material ui Autocomplete - select 'first entry' on Enter click

I have an autocomplete with options - which is an array of objects (Movies).
My goal is when user types, e.g., he types "in" and then hits the Enter, that it selects first entry from the rendered list. In this case would be - 'Inception'. See screenshot.
I found work around to select first entry by selecting first element from the rendered list. But I use createFilterOptions which makes it impossible.
Any suggestions?
https://codesandbox.io/s/material-demo-forked-cwcql?file=/demo.js
Add the autoHighlight={true} prop to the <Autocomplete> component.
https://material-ui.com/api/autocomplete/#main-content
https://codesandbox.io/s/material-demo-forked-dh9b3?file=/demo.js

React keeps children from previous render

I have problem rendering page based on array of templates stored in redux. I'm unable to provide the actual code as it is too complex to reproduce in sandbox, but I will try with simplified structure.
I have pinterest-style grid based on flex-grow and js calculations for each item based on its dimensions so I need to have all of this inside one container.
I have 3 groups of items in same div:
blank_item + templates.map + tailItems.map
<div className="grid">
{shouldRenderBlankItem && <BlankItem />}
{templates.map((template) => (
<Template
key={template.uuid}
template={template}
/>
))}
{shouldRenderTail &&
tailItems.map(item, i) => (
<TailItem
key={i}
item={item}
/>
))}
</div>
The problem is - sometimes after render I have EXTRA children left from previous render and React puts them in front of other elements within div.grid so the result I have will look like:
3-4 of EXTRA <Template/> + blank_item + templates.map + tailItems.map
As a key for Template I use template.uuid that is coming from backend and I know they're unique and react also doesn't show any warnings for duplicated keys - so I know I'm not getting any duplicated items from API what I thought might be an issue.
Redux is fine - I see correct number of templates in it e.g. 50, grid and react dev tools shows same 50 templates coming as a prop when I inspect parent component, but the actual DOM has e.g. 53 elements in the same moment.
How can I debug issue like this? I suppose something is wrong during reconciliation but I don't know where exactly to start debugging this.
I have React/ReactDOM 16.13.1
Ok so in my case the problem was broken backend api which might return same template twice - so uuid's that I use for keys were unique for each template but they are not really unique in terms of the page and DOM elements.
I faced this only in production build that is why I didn't have duplicated key warning (on dev build I have another DB with much less templates so I was unable to reproduce this).
So anyone facing similar issue: go check your keys are really unique within page, because what happens after new templates load comes:
React wants to remove old item
It searches corresponding DOM element for each key and finds item with key="XXX" and removes it from DOM
Their duplicated items stays in DOM as corresponding key was processed and React doesn't care about this particular key anymore
We load new templates and they get appended to the parent container
Voila! We have old items before newly loaded
What I did here - my key now is:
templates.map((template, i) => <Template key={template.uuid + i} />
So in this case I am safe even if backend returns duplicated items.
Of course we will fix backend as well. Thanks for reading and helping!
Just quick example how to search for items with same id in data:
var duplicates = new Set();
data.map(t => t.id).forEach((id, i, arr) => {if(arr.filter(item => item == id).length > 1){
duplicates.add(id);
}});
console.log("DUPLICATED IDs:", duplicates)

How to load different content(content which is different from already loaded content) on button click in React JS

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}
/>
}

PrimeNG Dropdown with filterMatchMode

I have a PrimeNG dropdown with 1000s of values. So I put in a filter.
Now the issue is I want to have a filter with something like "filterMatchMode = startwith" which we have for table filter columns.
The default implementation is "contains" which cannot be overridden by the "filterMatchMode" property like we have in tables.
Issue with this is that I have multiple values ending in "xyz" and I have a value which is "xyz". So I have to scroll all the way down to select the value.
What could be possible solutions?
Current Code which does not solve the problem:
<p-dropdown [options]="myOptions" [(ngModel)]="selectedModel" filter="true" placeholder="Select a Model"
[style]="{'width':'200px'}">
</p-dropdown>
Only thing I can think of is to make a full copy of the primeNG dropdown component to change it.
They use a filter method in an objectutils class to filter. This method is using indexOf to do the filtering, you could replace it with contains.

With Semantic UI React, how to build a tag input similar to Stack Overflow's?

I'm interested in building a Tag input feature like Stack Overflow where the feature set includes:
Input field which has a autocomplete feature (takes user input, fetches results from the server and displays those results to the user for easy selection.
Input field contains 1 or more selected items as tags.
Suggestions outside of the input which when clicked have the results added to the input field.
Screenshots from Stack Overflow:
I'm using Semantic-UI-React and notice there is a search component which could work: https://react.semantic-ui.com/modules/search
It does not appear that this Semantic-UI-React search component allows for adding more than one result or adding results via a method outside of the input. Am I missing something?
Should I use Semantic UI for this feature or will I need to build this entirely from scratch in my React app?
It's not properly highlighted in the react semantic-ui dropdown documentation but the allowAdditions field will enable tagging capabilities:
<Dropdown search selection multiple allowAdditions />
You need to add the onAddItem prop to update the options list. In here, I did this:
<Dropdown
placeholder='Select Friend'
fluid
search
selection
multiple
allowAdditions
onAddItem={(event, data) => friendOptions.push({key: data.value, text: data.value, value: data.value})}
options={friendOptions}
/>
And now you can add items to the dropdown list.

Resources