Using react hooks with Spreadsheet?

[Avera Guthrie]

Has anyone had any success using functional components with hooks and creating a Spreadsheet? 

I'm struggling to access all the features, such as headers, freezing panes and rows, etc. 

TIA 

[Aravinthan Seetharaman]

Hi Avera, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your query. We can able to use Spreadsheet with react hooks. Please refer the below code snippet and sample. 

 

 

import React, { useState } from "react"; 

import "./styles.css"; 

import { freezePaneData } from "./data"; 

function App() { 

  const [freezeRowCount, setCount] = useState(1); 

 

  return ( 

    <div> 

      <div className="control-pane"> 

        <div className="control-section spreadsheet-control"> 

          <SpreadsheetComponent 

          > 

            <SheetsDirective> 

              <SheetDirective 

                name="Gross Salary" 

                frozenRows={freezeRowCount} 

                frozenColumns={2} 

                selectedRange="C1" 

              > 

                <RangesDirective> 

                  <RangeDirective dataSource={freezePaneData} startCell="A2" /> 

                </RangesDirective> 

                    </CellsDirective> 

                </RowsDirective> 

              </SheetDirective> 

            </SheetsDirective> 

          </SpreadsheetComponent> 

        </div> 

      </div> 

    </div> 

  ); 

} 

 

 

Sample: https://codesandbox.io/s/react-hooks-counter-demo-forked-9zczy?file=/src/data.js  

 

Could you please check the above details, and get back to us, if you need assistance on this. 

 

Regards, 

Aravinthan S