Question

95

Applying multiple filters to a table reactjs

rated 0 times [ 98] [ 3] / answers: 1 / hits: 7539 / 4 Years ago, mon, may 18, 2020, 12:00:00

Here i have three filters on selection of which i need to filter data in a table.
I am using if else statement to check and filter the data , hence i want to modify the code in some modular way to achieve the same can any one suggest me , should i go with switch case ?

  if (mapFilter === 'Mapped') {

    if (listFilter) {

      const result = fullData.filter(

        data =>

          data.partner_mapping_classification.length > 0 &&

          data.account === listFilter,

      );

      setFinalData(result);

    } else {

      const result = fullData.filter(

        data => data.partner_mapping_classification.length > 0,

      );

      setFinalData(result);

    }

  } else if (mapFilter === 'Not Mapped') {

    if (listFilter) {

      const result = fullData.filter(

        data =>

          data.partner_mapping_classification === '' &&

          data.account === listFilter,

      );

      setFinalData(result);

    } else {

      const result = fullData.filter(

        data => data.partner_mapping_classification === '',

      );

      setFinalData(result);

    }

  } else if (mapFilter === 'All') {

    if (listFilter) {

      const result = fullData.filter(

        data => data.account === listFilter,

      );

      setFinalData(result);

    } else {

      const result = fullData.filter(

        data => data.partner_mapping_classification.length > 0,

      );

      setFinalData(result);

    }

  } else if (mapFilter === '' && listFilter !== '') {

    const result = fullData.filter(

      data => data.account === listFilter,

    );

    setFinalData(result);

  } else if (mapFilter === '' && listFilter === '') {

    setFinalData([]);

  } else {

    setFinalData([]);

  }

};

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alli

Add To Favorites

Follow

Total Points: 409

Total Questions: 101

Total Answers: 105

Location: The Bahamas

Member since Tue, Apr 27, 2021

3 Years ago

alli questions

1 How do I add types to a Vite library build?

Sat, Apr 23, 22, 00:00, 2 Years ago

1 Discord.js Bot giveaway command : embedSent.reactions.get is not a function

Fri, May 29, 20, 00:00, 4 Years ago

1 Framer-motion, delay rotateY while animating x

Tue, Mar 24, 20, 00:00, 4 Years ago

1 Questions about useCallback hook and anonymous function

Fri, Jan 24, 20, 00:00, 4 Years ago

1 React js google map react-google-maps-api add StandaloneSearchBox

Mon, Jan 13, 20, 00:00, 4 Years ago

View All

answered 4 Years ago arthur · Accepted Answer

Easy to scale method (followed by live-demo)

Using switch statements or multiple chained if( statements (or, even, multiple conditions within same if( statement) doesn't seem to be a good idea, as scaling and maintaining such code will become way too difficult.

As the opposite to above mentioned hardcoding techniques, I would suggest to have an object within your table component's state that will bind object properties (you wish your table entries to get filtered by) to keywords (attached to your inputs).

Assuming (based on your screenshot) you use MaterialUI for styling your components, following example would demonstrate above approach:

const { useState } = React,

      { render } = ReactDOM,

      { Container, TextField, TableContainer, Table, TableHead, TableBody, TableRow, TableCell } = MaterialUI,

      rootNode = document.getElementById('root')

      

const sampleData = [

        {id: 0, name: 'apple', category: 'fruit', color: 'green'},

        {id: 1, name: 'pear', category: 'fruit', color: 'green'},

        {id: 2, name: 'banana', category: 'fruit', color: 'yellow'},

        {id: 3, name: 'carrot', category: 'vegie', color: 'red'},

        {id: 4, name: 'strawberry', category: 'berry', color: 'red'}

      ],

      sampleColumns = [

        {id: 0, property: 'name', columnLabel: 'Item Name'},

        {id: 1, property: 'category', columnLabel: 'Category'},

        {id: 2, property: 'color', columnLabel: 'Item Color'}

      ]

      

const MyFilter = ({filterProperties, onFilter}) => (

  <Container>

    {

      filterProperties.map(({property,id}) => (

        <TextField

          key={id}

          label={property}

          name={property}

          onKeyUp={onFilter}

        />

      ))

    }

  </Container>

)



const MyTable = ({tableData, tableColumns}) => (

  <TableContainer>

    <Table>

      <TableHead>

        <TableRow>

          {

            tableColumns.map(({id, columnLabel}) => (

              <TableCell key={id}>

                {columnLabel}

              </TableCell>

            ))

          }

        </TableRow>

      </TableHead>

      <TableBody>

        {

          tableData.map(row => (

            <TableRow key={row.id}>

              {

                tableColumns.map(({id, property}) => (

                  <TableCell key={id}>

                    {row[property]}

                  </TableCell>

                ))

              }

            </TableRow>

          ))

        }

      </TableBody>

    </Table>

  </TableContainer>

)



const App = () => {

  const [state, setState] = useState({

          data: sampleData,

          columns: sampleColumns,

          filterObj: sampleColumns.reduce((r,{property}) => (r[property]='', r), {})

        }),

        onFilterApply = ({target:{name,value}}) => {

          const newFilterObj = {...state.filterObj, [name]: value}

          setState({

            ...state,

            filterObj: newFilterObj,

            data: sampleData.filter(props => 

              Object

                .entries(newFilterObj)

                .every(([key,val]) => 

                  !val.length ||

                  props[key].toLowerCase().includes(val.toLowerCase()))

            )

          })

        }

  return (

    <Container>

      <MyFilter 

        filterProperties={state.columns}

        onFilter={onFilterApply}

      />

      <MyTable

        tableData={state.data}

        tableColumns={state.columns}

      />

    </Container>

  )

}



render (

  <App />,

  rootNode

)

<script src=https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js></script><script src=https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js></script><script src=https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js></script><div id=root></div>