CODEWITHSUNDEEP
reactjsspreadsheet
SM079
SM079

Reputation: 715

React: How to restrict the no of columns in Spreadsheet component in react

I am using react-spreadsheet component in my react app.

I have two columns, but when i copy over 3 data a new column gets added in the webpage. Is there a way to restrict the spreadsheet with just 2 columns ?

EDIT:

import Spreadsheet from "react-spreadsheet";
import { useState } from "react";
  
export default function Sheet(){
  const [data, setData] = useState([
    [{ value: "Col1" }, { value: "Col2" }],
  ]);
  return(
  <div>
    <h4>SpreadSheet</h4>
    <Spreadsheet data={data} onChange={setData} />
  </div> 
  )
    
};

Any help is much appreciated.

Thanks,

Upvotes: 1

Views: 489

Answers (1)

Ping Zhao
Ping Zhao

Reputation: 276

Please use this handleChangeData function as onChange function props of Spreadsheet component.

  const [data, setData] = useState([]);

  const handleChangeData = (val: Matrix<CellBase<string | undefined>>) => {
    const result = [];
    data.forEach((row, index) => {
      const rowResult = [
        { value: val[index][0]?.value },
        { value: val[index][1]?.value },
      ];
      result.push(rowResult);
    });
    setData([...result]);
  };

Upvotes: 1

Related Questions