I try to sort the value and update the same of both columns by onclick of name and Lname(its TH)

Question

I try to sort the value and update the same of both columns by onclick of name and Lname(its TH) Below is the link which am refering https://codesandbox.io/s/customtablereact-forked-drnc0

am trying to sort both column, by ascending order by what am missing here https://codesandbox.io/s/customtablereact-forked-fnvlo any suggestion, how to implement sorting here

please refer below snippet

import React from "react";
export const CustTable = ({ columns, data, setData, search, setSearch }) => {
  const [editable, setEditable] = React.useState("");
  const [sortType, setSortType] = React.useState("asc");
  const cellEditable = (label) => {
    data.map((l) => {
      if (l.name === label.name) {
        setEditable(label.name);
      }
    });
  };
  const changeLastNameBasedIndex = (name, e, index) => {
    e.persist();
    setData((prevData) => {
      return [
        ...prevData.slice(0, index),
        { name, lname: e.target.value },
        ...prevData.slice(index + 1)
      ];
    });
  };
  const changeLastName = (name, e, index) => {
    let filterData = [];
    e.persist();
    setData((prevData) => {
      const dummyData = [...prevData];
      filterData = dummyData.filter((label) => {
        return label.name !== name;
      });
      return [...filterData, { name, lname: e.target.value }];
    });
  };
  const items = () => {
    let resultItems = data;
    if (search) {
      resultItems = data.filter((item) =>
        item.name.toLowerCase().includes(search.toLowerCase())
      );
    }

    return resultItems.map((label, index) => {
      return (
        <tr style={{ display: "flex" }} key={index}>
          <span style={{ width: "35%" }}>{label.name} </span>
          {editable === label.name ? (
            <input
              type="text"
              value={label.lname}
              onChange={
                search
                  ? (e) => changeLastName(label.name, e, index)
                  : (e) => changeLastNameBasedIndex(label.name, e, index)
              }
            />
          ) : (
            <span onClick={() => cellEditable(label)}>{label.lname} </span>
          )}
        </tr>
      );
    });
  };

  const searchData = (e) => {
    setSearch(e.target.value);
  };

  return (
    <>
      <div>
        <input
          type="search"
          placeholder="search"
          onChange={(e) => searchData(e)}
        />
      </div>
      <tr>
        <th>First</th>
        <th>Second</th>
      </tr>
      {items()}
    </>
  );
};

score 0 · Accepted Answer · answered Sep 08 '20 at 22:51

I made a short example of how to sort table data. To sort string, we have a trick to avoid problems, you can understand how this works here.

App.jsx

import React from 'react';
import SortTable from './SortTable'

function App() {
  const data = [
    {
      name: 'Wescley',
      lname: 'Jeto',
    },
    {
      name: 'Amanda',
      lname: 'Nudes',
    },
    {
      name: 'Gabriel',
      lname: 'Pensador',
    },
    {
      name: 'Allan',
      lname: 'Brado',
    },
    {
      name: 'Kelly',
      lname: 'guiça',
    },
  ];
  return (
    <div className="App">
      <SortTable data={data}/>
    </div>
  );
}

export default App;

/components/SortTable/index.jsx

import React, {useState} from "react";
import generateUuid from 'generate-uuid';

export default ({data}) => {

  const [tableData, setTableData] = useState(data)

  const sortByName = () => {
    const copy = [...tableData]
    copy.sort((a, b) => (a.name > b.name) ? 1 : -1);
    setTableData(copy)
  }

  const sortByLName = () => {
    const copy = [...tableData]
    copy.sort((a, b) => (a.lname > b.lname) ? 1 : -1);
    setTableData(copy)
  }

  return(
    <>
      <table border="1" style={{ margin: '0 auto', marginTop: '100px' }}>
        <thead>
          <tr>
            <td onClick={sortByName}>Name</td>
            <td onClick={sortByLName}>lName</td>
          </tr>
        </thead>
        <tbody>
          {
            tableData.map((item) => {
              const uuid = generateUuid();
              return (<tr key={uuid}>
                <td>{item.name}</td>
                <td>{item.lname}</td>
              </tr>)
            })
          }
        </tbody>
      </table>
    </>
  );
}

is it possible to sort ascending and descending both the columns — chidananda M N, Sep 09 '20 at 06:58
You'll add more complexity, but it's possible with the same logic. [Look here](https://stackoverflow.com/questions/6913512/how-to-sort-an-array-of-objects-by-multiple-fields) — Gabriel Ferrari, Sep 09 '20 at 11:04

I try to sort the value and update the same of both columns by onclick of name and Lname(its TH)

1 Answers1