Topic: Search property funky when searching for first rendered row element MDBDatatable
Bridget Melvin pro premium asked 2 years ago
Expected behavior When I go to search for a company, the table filters just fine for every element BUT the first element.
Actual behavior when I go to search for the first element, the table reorders in a funky way but does not filter.
Resources (screenshots, code snippets etc.)
const data = {
columns: [{
"label": "Name",
"field": "name"
},
{
"label": "Sector",
"field": "sector"
},
{
"label": "Role",
"field": "role"
},
{
"label": "Visit",
"field": "action",
"sort": false
}],
rows: [
{
name: "FastServe HVAC",
sector: "Business Services",
role: "Admin"
},
{
name: "FastServe HVAC",
sector: "Business Services",
role: "Admin"
},
{
name: "Hong Business Solutions",
sector: "Business Services",
role: "Collaborator"
},
{
name: "Kearn Manufacturing",
sector: "Industrials",
role: "User"
},
]
}
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
> * > .form-outline {
align-self: flex-start;
width: 50%;
}
`
const TableDiv = styled.div`
width: fit-content;
padding: 20px;
`
const StyledButton = styled(MDBBtn)`
padding: 3px!important;
margin: 3px!important;
`
const StyledTable = styled(MDBDatatable)`
align: center;
width: fit-content;
min-width: 800px;
max-width: 1200px;
& .datatable-inner {
max-height: 460px;
}
& td {
margin-bottom: 0!important;
padding-bottom: 6px! important;
}
`
export default function CompaniesTable({ ... }) {
function addActionButtons(rows) {
return rows.map((row) => {
return {
...row,
action: (
<Link to={`/companies/${strToUrl(row.name)}`} >
<StyledButton outline size='sm' floating className='arrow-btn' onClick={() => setLastCompany(row.name)}>
<MDBIcon icon='arrow-right' />
</StyledButton>
</Link>
),
}
})
}
return (
<StyledContainer>
<TableDiv>
<StyledTable
hover
search
striped
fixedHeader
data={data}
entriesOptions={[5, 10, 20]}
entries={10}
/>
</TableDiv>
</StyledContainer>
)
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Pro
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 4.1.0
- Device: Surface Laptop Studio
- Browser: Chrome
- OS: Windows 11
- Provided sample code: No
- Provided link: No
Wojciech Staniszewski staff commented 2 years ago
What exactly do you type in the search field when it "reorders in a funky way but does not filter". I don't really understand this quote.
Bridget Melvin pro premium commented 2 years ago
I type in "fastserv" which is the first row rendered in the table
Krzysztof Wilk staff commented 2 years ago
Could you create a simple GitHub repository with this issue? Everything works on my side - when I'm typing "fastserv" the table shows me the first two rows properly and doesn't reorder