React Configuring Spreadsheet

React Spreadsheet 구성 요소를 사용하면 사용자가 컨트롤의 여러 가지 다른 측면을 구성할 수 있습니다. 여기에는 셀 편집, 그리드선 및 헤더의 가시성, 보호, 확대/축소 수준 및 Excel 워크시트와 관련된 다양한 다른 속성이 포함되지만 이에 국한되지는 않습니다.

React Configuring Spreadsheet Example

EXAMPLE

DATA

TSX

import { saveAs } from "file-saver";
import { Workbook } from "@infragistics/igniteui-react-excel";
import { WorkbookFormat } from "@infragistics/igniteui-react-excel";
import { WorkbookSaveOptions } from "@infragistics/igniteui-react-excel";
import { WorkbookLoadOptions } from "@infragistics/igniteui-react-excel";
import { IgrExcelXlsxModule } from "@infragistics/igniteui-react-excel";
import { IgrExcelCoreModule } from "@infragistics/igniteui-react-excel";
import { IgrExcelModule } from "@infragistics/igniteui-react-excel";

IgrExcelCoreModule.register();
IgrExcelModule.register();
IgrExcelXlsxModule.register();

export class ExcelUtility {

    public static getExtension(format: WorkbookFormat): string {
        switch (format) {
            case WorkbookFormat.StrictOpenXml:
            case WorkbookFormat.Excel2007:
                return ".xlsx";
            case WorkbookFormat.Excel2007MacroEnabled:
                return ".xlsm";
            case WorkbookFormat.Excel2007MacroEnabledTemplate:
                return ".xltm";
            case WorkbookFormat.Excel2007Template:
                return ".xltx";
            case WorkbookFormat.Excel97To2003:
                return ".xls";
            case WorkbookFormat.Excel97To2003Template:
                return ".xlt";
        }
    }

    public static load(file: File): Promise<Workbook> {
        return new Promise<Workbook>((resolve, reject) => {
            ExcelUtility.readFileAsUint8Array(file).then((a) => {
                Workbook.load(a, new WorkbookLoadOptions(), (w) => {
                    resolve(w);
                }, (e) => {
                    reject(e);
                });
            }, (e) => {
                reject(e);
            });
        });
    }

    public static loadFromUrl(url: string): Promise<Workbook> {
        return new Promise<Workbook>((resolve, reject) => {
            const req = new XMLHttpRequest();
            req.open("GET", url, true);
            req.responseType = "arraybuffer";
            req.onload = (d): void => {
                const data = new Uint8Array(req.response);
                Workbook.load(data, new WorkbookLoadOptions(), (w) => {
                    resolve(w);
                }, (e) => {
                    reject(e);
                });
            };
            req.send();
        });
    }

    public static save(workbook: Workbook, fileNameWithoutExtension: string): Promise<string> {
        return new Promise<string>((resolve, reject) => {
            const opt = new WorkbookSaveOptions();
            opt.type = "blob";

            workbook.save(opt, (d) => {
                const fileExt = ExcelUtility.getExtension(workbook.currentFormat);
                const fileName = fileNameWithoutExtension + fileExt;
                saveAs(d as Blob, fileName);
                resolve(fileName);
            }, (e) => {
                reject(e);
            });
        });
    }

    private static readFileAsUint8Array(file: File): Promise<Uint8Array> {
        return new Promise<Uint8Array>((resolve, reject) => {
            const fr = new FileReader();
            fr.onerror = (e): void => {
                reject(fr.error);
            };

            if (fr.readAsBinaryString) {
                fr.onload = (e): void => {
                    const rs = (fr as any).resultString;
                    const str: string = rs != null ? rs : fr.result;
                    const result = new Uint8Array(str.length);
                    for (let i = 0; i < str.length; i++) {
                        result[i] = str.charCodeAt(i);
                    }
                    resolve(result);
                };
                fr.readAsBinaryString(file);
            } else {
                fr.onload = (e): void => {
                    resolve(new Uint8Array(fr.result as ArrayBuffer));
                };
                fr.readAsArrayBuffer(file);
            }
        });
    }
}
tsコピー

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { ExcelUtility } from './ExcelUtility';
import { IgrExcelXlsxModule } from "@infragistics/igniteui-react-excel";
import { IgrExcelCoreModule } from "@infragistics/igniteui-react-excel";
import { IgrExcelModule } from "@infragistics/igniteui-react-excel";
import { IgrSpreadsheetModule } from "@infragistics/igniteui-react-spreadsheet";
import { IgrSpreadsheet } from "@infragistics/igniteui-react-spreadsheet";
import { SpreadsheetEnterKeyNavigationDirection } from "@infragistics/igniteui-react-spreadsheet";
import { SpreadsheetCellSelectionMode } from "@infragistics/igniteui-react-spreadsheet";

IgrExcelCoreModule.register();
IgrExcelModule.register();
IgrExcelXlsxModule.register();
IgrSpreadsheetModule.register();

export default class SpreadsheetConfigOptions extends React.Component<any, any> {
    public spreadsheet: IgrSpreadsheet;

    constructor(props: any) {
        super(props);

        this.onEnterKeyNavEnabledChanged = this.onEnterKeyNavEnabledChanged.bind(this);
        this.onEnterKeyNavDirectionChanged = this.onEnterKeyNavDirectionChanged.bind(this);

        this.onFormulaBarVisibleChanged = this.onFormulaBarVisibleChanged.bind(this);
        this.onGridlinesVisibleChanged = this.onGridlinesVisibleChanged.bind(this);
        this.onHeadersVisibleChanged = this.onHeadersVisibleChanged.bind(this);
        this.onTabAreaVisibleChanged = this.onTabAreaVisibleChanged.bind(this);

        this.onProtectedChanged = this.onProtectedChanged.bind(this);
        this.onSelectionModeChanged = this.onSelectionModeChanged.bind(this);
        this.onZoomLevelChanged = this.onZoomLevelChanged.bind(this);

        this.onSpreadsheetRef = this.onSpreadsheetRef.bind(this);

        this.state = {
            areGridlinesVisible: true,
            areHeadersVisible: true,
            enterKeyNavigationDirection: SpreadsheetEnterKeyNavigationDirection.Down,
            isEnterKeyNavEnabled: true,
            isFormulaBarVisible: true,
            isProtected: false,
            isTabBarAreaVisible: true,
            spreadsheetSelectionMode: SpreadsheetCellSelectionMode.Normal,
            spreadsheetZoomLevel: 100
        }
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <div className="options horizontal">
                    <label className="options-label">Selection Mode: </label>
                    <select onChange={this.onSelectionModeChanged} defaultValue="Normal">
                        <option>AddToSelection</option>
                        <option>ExtendSelection</option>
                        <option>Normal</option>
                    </select>

                    <label className="options-label">Enter Key Navigation Direction: </label>
                    <select onChange={this.onEnterKeyNavDirectionChanged} defaultValue="Down">
                        <option>Down</option>
                        <option>Left</option>
                        <option>Right</option>
                        <option>Up</option>
                    </select>

                </div>
                <div className="options horizontal">
                    <label className="options-label" style={{width: "145px"}}><input type="checkbox" checked={this.state.areHeadersVisible} onChange={this.onHeadersVisibleChanged}/> Enable Headers</label>
                    <label className="options-label" style={{width: "175px"}}><input type="checkbox" checked={this.state.isFormulaBarVisible} onChange={this.onFormulaBarVisibleChanged} /> Enable Formula Bar</label>
                    <label className="options-label" style={{width: "225px"}}><input type="checkbox" checked={this.state.isEnterKeyNavEnabled} onChange={this.onEnterKeyNavEnabledChanged} />Enable Enter Key Navigation</label>
                    <label className="options-label">Zoom Level: {this.state.spreadsheetZoomLevel}%</label>
                </div>
                <div className="options horizontal">
                    <label className="options-label" style={{width: "145px"}}><input type="checkbox" checked={this.state.areGridlinesVisible} onChange={this.onGridlinesVisibleChanged} /> Enable Gridlines</label>
                    <label className="options-label" style={{width: "175px"}}><input type="checkbox" checked={this.state.isTabBarAreaVisible} onChange={this.onTabAreaVisibleChanged} /> Enable Tab Bar Area</label>
                    <label className="options-label" style={{width: "225px"}}><input type="checkbox" checked={this.state.isProtected} onChange={this.onProtectedChanged} /> Enable Protected Mode</label>
                    <input className="options-slider" type="range" min={50} max={150} step={5} value={this.state.spreadsheetZoomLevel} onChange={this.onZoomLevelChanged} />
                </div>

                <IgrSpreadsheet ref={this.onSpreadsheetRef}
                    height="calc(100% - 120px)"
                    width="100%"
                    selectionMode={this.state.spreadsheetSelectionMode}
                    enterKeyNavigationDirection={this.state.enterKeyNavigationDirection}
                    zoomLevel={this.state.spreadsheetZoomLevel}
                    isFormulaBarVisible={this.state.isFormulaBarVisible}
                    isEnterKeyNavigationEnabled={this.state.isEnterKeyNavEnabled}
                    areGridlinesVisible={this.state.areGridlinesVisible}
                    areHeadersVisible={this.state.areHeadersVisible} />
            </div>
        );
    }

    public onSelectionModeChanged(e: any) {
        const selection: string = e.target.value;

        switch (selection) {
            case "AddToSelection": {
                this.setState({ spreadsheetSelectionMode: SpreadsheetCellSelectionMode.AddToSelection });
                break;
            }
            case "ExtendSelection": {
                this.setState({ spreadsheetSelectionMode: SpreadsheetCellSelectionMode.ExtendSelection });
                break;
            }
            case "Normal": {
                this.setState({ spreadsheetSelectionMode: SpreadsheetCellSelectionMode.Normal });
                break;
            }
        }
    }

    public onEnterKeyNavDirectionChanged(e: any) {
        const selection: string = e.target.value;

        switch (selection) {
            case "Down": {
                this.setState({ enterKeyNavigationDirection: SpreadsheetEnterKeyNavigationDirection.Down });
                break;
            }
            case "Up": {
                this.setState({ enterKeyNavigationDirection: SpreadsheetEnterKeyNavigationDirection.Up });
                break;
            }
            case "Left": {
                this.setState({ enterKeyNavigationDirection: SpreadsheetEnterKeyNavigationDirection.Left });
                break;
            }
            case "Right": {
                this.setState({ enterKeyNavigationDirection: SpreadsheetEnterKeyNavigationDirection.Right });
                break;
            }
        }
    }

    public onZoomLevelChanged(e: any) {
        this.setState({ spreadsheetZoomLevel: e.target.value });
    }

    public onProtectedChanged(e: any) {
        const checked: boolean = e.target.checked;
        this.setState({isProtected: checked});

        if (checked) {
            this.spreadsheet.activeWorksheet.protect();
        }
        else{
            this.spreadsheet.activeWorksheet.unprotect();
        }
    }

    public onFormulaBarVisibleChanged(e: any) {
        this.setState({isFormulaBarVisible: e.target.checked});
    }

    public onEnterKeyNavEnabledChanged(e: any) {
        this.setState({isEnterKeyNavEnabled: e.target.checked});
    }

    public onTabAreaVisibleChanged(e: any) {
        const checked: boolean = e.target.checked;
        this.setState({isTabBarAreaVisible: checked});

        if(checked){
            this.spreadsheet.workbook.windowOptions.tabBarVisible = true;
        }
        else{
            this.spreadsheet.workbook.windowOptions.tabBarVisible = false;
        }
    }

    public onGridlinesVisibleChanged(e: any) {
        this.setState({areGridlinesVisible: e.target.checked});
    }

    public onHeadersVisibleChanged(e: any) {
        this.setState({areHeadersVisible: e.target.checked});
    }

    public onSpreadsheetRef(spreadsheet: IgrSpreadsheet) {
        if (!spreadsheet) { return; }

        this.spreadsheet = spreadsheet;

        const url = "https://static.infragistics.com/xplatform/excel/SalesData.xlsx";
        ExcelUtility.loadFromUrl(url).then((w) => {
            this.spreadsheet.workbook = w;
        });
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SpreadsheetConfigOptions/>);
tsxコピー

Edit in: Codesandbox

Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.

Configuring Cell Editing

사용자가 셀 값을 편집하고 새 입력을 확인하면 IgrSpreadsheet 컨트롤은 스프레드시트 구성에 따라 Enter 키를 누를 때 현재 활성 셀에 인접한 셀로 이동하는 기능을 갖습니다.

이 Enter 키 탐색을 활성화하려면 isEnterKeyNavigationEnabled 속성을 true로 설정하면 됩니다. false로 설정하면 Enter 키를 누를 때 활성 셀이 동일하게 유지됩니다.

또한 입력하다 키를 설정하여 enterKeyNavigationDirection 재산 Down, Up, Left 또는 Right.

다음 코드 조각은 위 내용을 보여줍니다.

import { SpreadsheetEnterKeyNavigationDirection } from 'igniteui-react-spreadsheet';
ts

<IgrSpreadsheet isEnterKeyNavigationEnabled={true} enterKeyNavigationDirection={SpreadsheetEnterKeyNavigationDirection.Left} />
tsx

this.spreadsheet.isEnterKeyNavigationEnabled = true;
this.spreadsheet.enterKeyNavigationDirection = SpreadsheetEnterKeyNavigationDirection.Left;
ts

Configuring Formula Bar

React IgrSpreadsheet 사용하면 컨트롤의 isFormulaBarVisible 속성을 설정하여 수식 입력줄의 표시 여부를 구성할 수 있습니다.

다음 코드 조각은 위 내용을 보여줍니다.

<IgrSpreadsheet isFormulaBarVisible={true} />
tsx

this.spreadsheet.isFormulaBarVisible = true;
ts

Configuring Gridlines

​IgrSpreadsheet 사용하면 컨트롤의 areGridlinesVisible 속성을 설정하여 눈금선의 가시성을 구성할 수 있습니다.

다음 코드 조각은 위 내용을 보여줍니다.

<IgrSpreadsheet areGridlinesVisible={true} />
tsx

this.spreadsheet.areGridlinesVisible = true;
ts

Configuring Headers

​IgrSpreadsheet 사용하면 컨트롤의 areHeadersVisible 속성을 설정하여 헤더의 가시성을 구성할 수 있습니다.

다음 코드 조각은 위 내용을 보여줍니다.

<IgrSpreadsheet areHeadersVisible={true} />
tsx

this.spreadsheet.areHeadersVisible = false;
ts

Configuring Navigation

​IgrSpreadsheet 컨트롤을 사용하면 컨트롤이 "종료 모드"인지 여부를 구성하여 워크시트의 셀 간 탐색을 구성할 수 있습니다. 종료 모드는 화살표 키를 누르면 현재 셀에서 화살표 키를 누르는 방향에 따라 인접한 셀에 데이터가 있는 행이나 열의 끝으로 활성 셀이 이동하는 기능입니다. 이 기능은 대규모 데이터 블록의 끝 부분을 매우 빠르게 탐색하는 데 유용합니다.

예를 들어, 종료 모드에서 큰 100x100 데이터 블록을 클릭하고 Right 화살표 키를 누르면 현재 있는 행의 오른쪽 끝, 데이터가 있는 가장 오른쪽 열로 이동합니다. 이 작업이 끝나면 IgrSpreadsheet 종료 모드에서 나옵니다.

종료 모드는 사용자가 End 키를 누르면 런타임에 적용되지만 스프레드시트 컨트롤의 isInEndMode 속성을 설정하여 프로그래밍 방식으로 구성할 수 있습니다.

다음 코드 조각은 IgrSpreadsheet 종료 모드에서 시작된다는 점에서 위 내용을 보여줍니다.

<IgrSpreadsheet isInEndMode={true} />
tsx

this.spreadsheet.isInEndMode = true;
ts

Configuring Protection

​IgrSpreadsheet 워크시트별로 통합 문서 보호를 존중합니다. 워크시트의 보호 구성은 워크시트에서 Protect() 메서드를 호출하여 보호하고 Unprotect() 메서드를 호출하여 보호를 해제하여 구성할 수 있습니다.

아래 코드를 사용하여 IgrSpreadsheet 컨트롤의 현재 활성 워크시트에 대한 보호를 활성화하거나 비활성화할 수 있습니다.

this.spreadsheet.activeWorksheet.protect();
this.spreadsheet.activeWorksheet.unprotect();
ts

Configuring Selection

​IgrSpreadsheet 컨트롤을 사용하면 컨트롤에서 허용되는 선택 유형을 구성한 다음 사용자가 수정자 키(Shift 또는 Ctrl)를 누를 수 있습니다. 스프레드시트의 selectionMode 속성을 다음 값 중 하나로 설정하면 됩니다.

• AddToSelection: 마우스로 드래그할 때 Ctrl 키를 누르지 않고도 SpreadsheetSelection 개체의 cellRanges 컬렉션에 새 셀 범위가 추가되고, 모드에 들어간 후 첫 번째 화살표 키 탐색으로 범위가 추가됩니다. Shift+F8을 눌러 모드로 들어갈 수 있습니다.
• ExtendSelection: 활성 셀을 나타내는 SpreadsheetSelection 개체의 cellRanges 컬렉션의 선택 범위는 마우스를 사용하여 셀을 선택하거나 키보드를 통해 탐색할 때 업데이트됩니다.
• Normal: 셀이나 셀 범위를 선택하기 위해 마우스를 드래그하면 선택 항목이 대체됩니다. 마찬가지로 키보드를 통해 탐색할 때 새로운 선택 항목이 생성됩니다. Ctrl 키를 누른 채 마우스를 사용하여 새 범위를 추가할 수 있으며, Shift 키를 누른 채 마우스로 클릭하거나 화살표 키와 같은 키보드로 탐색하여 활성 셀을 포함하는 선택 범위를 변경할 수 있습니다.

위에서 설명한 SpreadsheetSelection 객체는 IgrSpreadsheet 컨트롤의 activeSelection 속성을 이용하여 얻을 수 있습니다.

다음 코드 조각은 선택 모드의 구성을 보여줍니다.

import { SpreadsheetCellSelectionMode } from 'igniteui-react-spreadsheet';
ts

<IgrSpreadsheet selectionMode={SpreadsheetCellSelectionMode.ExtendSelection} />
tsx

this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.ExtendSelection;
ts

​IgrSpreadsheet 컨트롤의 선택은 프로그래밍 방식으로 설정하거나 얻을 수도 있습니다. 단일 선택의 경우 activeCell 속성을 설정할 수 있습니다. 다중 선택은 IgrSpreadsheet 컨트롤의 activeSelection 속성에 의해 반환되는 SpreadsheetSelection 개체를 통해 수행됩니다.

그만큼 SpreadsheetSelection 객체는 AddCellRange() 새로운 형식으로 스프레드시트의 선택 영역에 셀 범위를 프로그래밍 방식으로 추가할 수 있는 방법입니다. SpreadsheetCellRange 물체.

다음 코드 조각은 스프레드시트의 선택 항목에 셀 범위를 추가하는 방법을 보여줍니다.

this.spreadsheet.activeSelection.addCellRange(new SpreadsheetCellRange(2, 2, 5, 5));
ts

Configuring Tab Bar Area

그만큼 IgrSpreadsheet 컨트롤은 탭 표시줄 영역의 가시성 및 너비 구성을 따릅니다. WindowOptions 현재 활동 중인 것 중 workbook를 통해 tabBarWidth 그리고 TabBarVisibility 각각 속성.

탭바 영역은 워크시트 이름을 컨트롤의 탭으로 시각화하는 영역입니다.

다음 코드 조각을 사용하여 탭 표시줄의 가시성과 너비를 구성할 수 있습니다.

this.spreadsheet.workbook.windowOptions.tabBarVisible = false;

this.spreadsheet.workbook.windowOptions.tabBarWidth = 200;
ts

Configuring Zoom Level

React Spreadsheet 구성 요소는 zoomLevel 속성을 구성하여 확대 및 축소를 지원합니다. 확대 수준은 최대 400%, 최소 10%가 될 수 있습니다.

이 속성을 숫자로 설정하면 백분율이 정수로 표시되므로 zoomLevel 100으로 설정하는 것은 100%로 설정하는 것과 같습니다.

다음 코드 조각은 스프레드시트의 확대/축소 수준을 구성하는 방법을 보여줍니다.

<IgrSpreadsheet zoomLevel={200} />
tsx

this.spreadsheet.zoomLevel = 200;
ts

API References

• activeCell
• activeSelection
• CellRanges
• ExtendSelection:
• selectionMode
• SpreadsheetCellRange
• SpreadsheetSelection
• IgrSpreadsheet
• WindowOptions
• workbook
• zoomLevel