Implement GetEntireData

Author: moriyuu

src/Spreadsheet.tsx

@@ -121,11 +121,16 @@ export type Props<CellType extends Types.CellBase> = {
   ) => void;
 };
 
+export type Ref<CellType extends Types.CellBase> = {
+  getEntireData(): Matrix.Matrix<CellType>;
+};
+
 /**
  * The Spreadsheet component
  */
 const Spreadsheet = <CellType extends Types.CellBase>(
-  props: Props<CellType>
+  props: Props<CellType>,
+  ref: React.Ref<Ref<CellType>>
 ): React.ReactElement => {
   const {
     className,
@@ -553,9 +558,21 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     ]
   );
 
+  React.useImperativeHandle(
+    ref,
+    (): Ref<CellType> => {
+      return {
+        getEntireData() {
+          return state.model.data;
+        },
+      };
+    },
+    [state.model.data]
+  );
+
   return (
     <context.Provider value={reducerElements}>{rootNode}</context.Provider>
   );
 };
 
-export default Spreadsheet;
+export default React.forwardRef(Spreadsheet);

src/index.ts

@@ -4,7 +4,7 @@ import DataViewer from "./DataViewer";
 
 export default Spreadsheet;
 export { Spreadsheet, DataEditor, DataViewer };
-export type { Props } from "./Spreadsheet";
+export type { Props, Ref } from "./Spreadsheet";
 export { createEmpty as createEmptyMatrix } from "./matrix";
 export type { Matrix } from "./matrix";
 export {

src/stories/Spreadsheet.stories.tsx

@@ -4,6 +4,7 @@ import {
   createEmptyMatrix,
   Spreadsheet,
   Props,
+  Ref,
   CellBase,
   EntireWorksheetSelection,
   Selection,
@@ -315,3 +316,21 @@ export const ControlledSelection: StoryFn<Props<StringCell>> = (props) => {
     </div>
   );
 };
+
+export const GetEntireData: StoryFn<Props<StringCell>> = (props) => {
+  const ref = React.useRef<Ref<StringCell>>(null);
+
+  const getEntireData = React.useCallback(() => {
+    const data = ref.current?.getEntireData();
+    console.log("data", data);
+  }, []);
+
+  return (
+    <>
+      <div>
+        <button onClick={getEntireData}>Get entire data</button>
+      </div>
+      <Spreadsheet ref={ref} {...props} />
+    </>
+  );
+};