title: I try to sort the value and update the same of both columns by onclick of name and Lname(its TH)
body: <p>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
  <a href="https://codesandbox.io/s/customtablereact-forked-drnc0" rel="nofollow noreferrer">https://codesandbox.io/s/customtablereact-forked-drnc0</a></p>
  <p>am trying to sort both column, by ascending order by
  what am missing here
  <a href="https://codesandbox.io/s/customtablereact-forked-fnvlo" rel="nofollow noreferrer">https://codesandbox.io/s/customtablereact-forked-fnvlo</a>
  any suggestion, how to implement sorting here</p>
  <p>please refer below snippet</p>
  <pre><code>import React from &quot;react&quot;;
  export const CustTable = ({ columns, data, setData, search, setSearch }) =&gt; {
    const [editable, setEditable] = React.useState(&quot;&quot;);
    const [sortType, setSortType] = React.useState(&quot;asc&quot;);
    const cellEditable = (label) =&gt; {
      data.map((l) =&gt; {
        if (l.name === label.name) {
          setEditable(label.name);
        }
      });
    };
    const changeLastNameBasedIndex = (name, e, index) =&gt; {
      e.persist();
      setData((prevData) =&gt; {
        return [
          ...prevData.slice(0, index),
          { name, lname: e.target.value },
          ...prevData.slice(index + 1)
        ];
      });
    };
    const changeLastName = (name, e, index) =&gt; {
      let filterData = [];
      e.persist();
      setData((prevData) =&gt; {
        const dummyData = [...prevData];
        filterData = dummyData.filter((label) =&gt; {
          return label.name !== name;
        });
        return [...filterData, { name, lname: e.target.value }];
      });
    };
    const items = () =&gt; {
      let resultItems = data;
      if (search) {
        resultItems = data.filter((item) =&gt;
          item.name.toLowerCase().includes(search.toLowerCase())
        );
      }
  
      return resultItems.map((label, index) =&gt; {
        return (
          &lt;tr style={{ display: &quot;flex&quot; }} key={index}&gt;
            &lt;span style={{ width: &quot;35%&quot; }}&gt;{label.name} &lt;/span&gt;
            {editable === label.name ? (
              &lt;input
                type=&quot;text&quot;
                value={label.lname}
                onChange={
                  search
                    ? (e) =&gt; changeLastName(label.name, e, index)
                    : (e) =&gt; changeLastNameBasedIndex(label.name, e, index)
                }
              /&gt;
            ) : (
              &lt;span onClick={() =&gt; cellEditable(label)}&gt;{label.lname} &lt;/span&gt;
            )}
          &lt;/tr&gt;
        );
      });
    };
  
    const searchData = (e) =&gt; {
      setSearch(e.target.value);
    };
  
    return (
      &lt;&gt;
        &lt;div&gt;
          &lt;input
            type=&quot;search&quot;
            placeholder=&quot;search&quot;
            onChange={(e) =&gt; searchData(e)}
          /&gt;
        &lt;/div&gt;
        &lt;tr&gt;
          &lt;th&gt;First&lt;/th&gt;
          &lt;th&gt;Second&lt;/th&gt;
        &lt;/tr&gt;
        {items()}
      &lt;/&gt;
    );
  };
  
  </code></pre>