How to find repeated values of the column in table and perform sorting across columns

Question

I am doing sorting in the given table, I have asked to hide and show the values based on sorting For example: If user is clicking (Credit Column, then outstanding and allbal column value should be null for both ASC and DESC) it's working fine. I want to perform sorting like if (Debit columns values are same I want to sort the Debit Column based on "Date"(Asc to Desc). If both "Debit" and "Date" Columns are same I want to sort Debit column based on "visitorCode"(Asc to Desc).

For example in Debit Column if I have 5 values (100, 100, 100, 200, 300) I want to display the Debit column values based on Date Column. If Date and Debit columns are same For example : Date column is having (2021-02-04, 2021-02-04, 2021-02-10, 2021-02-08)(YYYY-MM-DD) Debit Column (100,100,100,200,300) I want to perform sort Debit Column based on "visitorCode".

I've tried many ways to achieve this, unfortunately all of my logics are failed. Anybody can guide me how to perform above sorting. Thanks in advance.

Below is my code:

const props = {

    "rows" : 
    [{
        "visitiedDate": "2021-04-02",
        "visitorCode": [
            "ABC001"
        ], 
        "visittype": 1,
        "debit": 800,
        "credit": 100,
        "oustanding": 1000,
        "allbal":1000
    },
    {
        "visitiedDate": "2021-04-02",
        "visitorCode": [
            "ABC002"
        ], 
        "visittype": 1,
        "debit": 800,
        "credit": 100,
        "oustanding": 1000,
        "allbal":1000
    },
    {
        "visitiedDate": "2021-02-02",
        "visitorCode": [
            "ABC003"
        ], 
        "visittype": 2,
        "debit": 900,
        "credit": 100,
        "oustanding": 1000,
        "allbal":1000
    },
    {
        "visitiedDate": "2021-03-01",
        "visitorCode": [
            "ABC004"
        ], 
        "visittype": 2,
        "debit": 1000,
        "credit": 100,
        "oustanding": 1000,
        "allbal":1000
    },
    {
        "visitiedDate": "2021-04-02",
        "visitorCode": [
            "ABC005"
        ], 
        "visittype": 1,
        "debit": 500,
        "credit": 100,
        "oustanding": 1000,
        "allbal":1000
    }], 
    
    columns = [{
    "key": "date",
    "name": "Date",
    "isSort": true
  },
  
  {
    "key": "visittype",
    "name": "type",
    "isSort": true
  },
  
{
    "key": "vistiorCode",
    "name": "code",
    "isSort": false
  },
  
  {
    "key": "credit",
    "name": "camount",
    "isSort": true
  },
  
  {
    "key": "debit",
    "name": "damount",
    "isSort": true
  },

  {
    "key": "outstanding",
    "name": "outstandingBal",
  },
  
  {
    "key": "allbal",
    "name": "allBalance",
  },
]

const [col, setCol] = useState(columns)
const Rows = props.contractDetails; 
const TotalDetails = props.totalCount

function SortingRow(rows, col, sortMethod) {

  const sortRow = ((sortMethod === "ASC") || ((col === "type") || (col === "credit") || (col === "debit"))?
    rows.map(Details) => {
      if (col === "debit")
            return  Object.assign({}, Details, {outstanding: "", allbal: ""})   
      else  if(col === "credit"){
            return  Object.assign({}, Details, {outstanding: "", allbal: ""})   
            })
            : rows
  return sortMethod ?
    sortRow
    .slice()
    .sort(
      ({
        [col]: a
      }, {
        [col]: b
      }) =>
      (a === b ? 0 : a < b ? -1 : 1) *
      (sortMethod === "ASC" ? 1 : -1)
    }) :
    rows
}

const rows = col
  .slice()
  .reverse()
  .reduce(
    (sortedRows, {
      key: col,
      isSort,
      sortMethod
    }) =>
    isSort ? SortingRow(sortedRows, col, sortMethod) : sortedRows,
    Rows
  );

return (

  rows = {
    rows
  }
  col = {
    col
  }
  onSort = {
    (col, sortMethod) => setCol(
      cols.map(cl =>
        c.key === col ? Object.assign({}, cl, {
          sortMethod
        }) :
        cl
      )
    )
  }
)

    
} 

Answer 1

You can achieve that by using Array#sort() method:

let rows = [
  {
    visitiedDate: "2021-04-02",
    visitorCode: ["ABC001"],
    visittype: 1,
    debit: 800,
    credit: 100,
    oustanding: 1000,
    allbal: 1000
  },
  {
    visitiedDate: "2021-04-02",
    visitorCode: ["ABC002"],
    visittype: 1,
    debit: 800,
    credit: 100,
    oustanding: 1000,
    allbal: 1000
  },
  {
    visitiedDate: "2021-02-02",
    visitorCode: ["ABC003"],
    visittype: 2,
    debit: 900,
    credit: 100,
    oustanding: 1000,
    allbal: 1000
  },
  {
    visitiedDate: "2021-03-01",
    visitorCode: ["ABC004"],
    visittype: 2,
    debit: 1000,
    credit: 100,
    oustanding: 1000,
    allbal: 1000
  },
  {
    visitiedDate: "2021-04-02",
    visitorCode: ["ABC005"],
    visittype: 1,
    debit: 500,
    credit: 100,
    oustanding: 1000,
    allbal: 1000
  }
];
console.log(
  rows.sort((a, b) =>
    a.debit < b.debit
      ? -1
      : 0 && new Date(a.visitiedDate) < new Date(b.visitiedDate)
      ? -1
      : 0 || (a.visitorCode[0] < b.visitorCode[0] ? -1 : 1)
  )
);