Topic: Search property funky when searching for first rendered row element MDBDatatable

Bridget Melvin premium asked 1 year 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 => {
      return {
        action: (
          <Link to={`/companies/${strToUrl(}`} >
            <StyledButton outline size='sm' floating className='arrow-btn' onClick={() => setLastCompany(}>
              <MDBIcon icon='arrow-right' />

  return (

          entriesOptions={[5, 10, 20]}

Wojciech Staniszewski staff commented 1 year 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 premium commented 1 year ago

I type in "fastserv" which is the first row rendered in the table

Krzysztof Wilk staff commented 1 year 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

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Premium
  • 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