ts-excel-app

# ts-excel-app

ts-excel-app is a JavaScript library for creating and managing Excel workspaces in a web application. It provides a set of components and methods that allow users to interact with Excel-like spreadsheets in their browser.

## Installation

To install ts-excel-app, you can use npm or yarn:

```bash
npm install ts-excel-app

or

yarn add ts-excel-app

Usage

Import the necessary components and styles in your application:

import { WorkSpace, ExcelProvider, useExcel } from 'ts-excel-app';

Create a functional component for your application and use the useExcel hook to access the Excel methods:

function App() {
  const { externalMethods } = useExcel();
  const {
    addRow,
    addColumn,
    setPrivateColumns,
    getPrivateColumns,
    clearPrivateColumns,
    setEncryptedColumns,
    getEncryptedColumns,
    clearEncryptedColumns,
    refreshWorkSpace,
    exportToExcel,
    exportToJson,
    uploadExcelFile,
    uploadJsonData,
  } = externalMethods;

  const json = [
    // Your JSON data goes here
  ];

  return (
    <>
      <button onClick={() => addRow()}>Add Row</button>
      <button onClick={() => addColumn()}>Add Column</button>
      <button onClick={() => setPrivateColumns(['Header1', 'Header2'])}>Set Private Columns</button>
      <button onClick={() => console.log(getPrivateColumns())}>Get Private Columns</button>
      <button onClick={() => clearPrivateColumns()}>Clear Private Columns</button>
      <button onClick={() => setEncryptedColumns(['Header1', 'Header2'])}>Set Encrypted Columns</button>
      <button onClick={() => console.log(getEncryptedColumns())}>Get Encrypted Columns</button>
      <button onClick={() => clearEncryptedColumns()}>Clear Encrypted Columns</button>
      <button onClick={() => refreshWorkSpace()}>Refresh Workspace</button>
      <button onClick={() => exportToExcel()}>Download as XLSX</button>
      <button onClick={() => exportToJson()}>Download as JSON</button>
      <div>
        <input type="file" id="demo" accept=".xls,.xlsx" onChange={uploadExcelFile}></input>
      </div>
      <button onClick={() => uploadJsonData(json)}>Upload Json</button>
    </>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <ExcelProvider
      onAddRow={() => console.log('Row Added')}
      onAddColumn={() => console.log('Column Added')}
    >
      <WorkSpace
        showAddRow={false}
        showAddColumn={false}
        onCellChange={() => console.log('Cell Value Changed')}
        onHeaderChange={() => console.log('Header Value Changed')}
        onRowDelete={() => console.log('Row Deleted')}
        onRowCopy={() => console.log('Row Copied')}
        onRowCut={() => console.log('Row cut')}
        onRowPaste={() => console.log('Row paste')}
        onInsertRow={() => console.log('Row inserted')}
        onClearRow={() => console.log('Row Cleared')}
        onColumnDelete={() => console.log('Column Deleted')}
        onColumnCopy={() => console.log('Column Copied')}
        onColumnCut={() => console.log

('Column cut')}
        onColumnPaste={() => console.log('Column paste')}
        onInsertColumn={() => console.log('Column inserted')}
        onClearColumn={() => console.log('Column Cleared')}
      />
      <App />
    </ExcelProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Components

WorkSpace

The WorkSpace component provides an Excel-like interface for users to interact with the spreadsheet. It renders the grid, headers, and other components required for Excel functionality.

Props

• showAddRow (boolean, optional): Determines whether to show the "Add Row" button. Default is false.
• showAddColumn (boolean, optional): Determines whether to show the "Add Column" button. Default is false.
• headerStyle (Object): Pass a object of style properties to override the default style of headers
• cellStyle (Object): Pass a object of style properties to override the default style of cells

Event Handlers

The WorkSpace component provides several event handlers that you can pass as props:

• onCellChange: Triggered when a cell value is changed.
• onHeaderChange: Triggered when a header value is changed.
• onRowDelete: Triggered when a row is deleted.
• onRowCopy: Triggered when a row is copied.
• onRowCut: Triggered when a row is cut.
• onRowPaste: Triggered when a row is pasted.
• onInsertRow: Triggered when a row is inserted.
• onClearRow: Triggered when a row is cleared.
• onColumnDelete: Triggered when a column is deleted.
• onColumnCopy: Triggered when a column is copied.
• onColumnCut: Triggered when a column is cut.
• onColumnPaste: Triggered when a column is pasted.
• onInsertColumn: Triggered when a column is inserted.
• onClearColumn: Triggered when a column is cleared.

ExcelProvider

The ExcelProvider component wraps your application and provides the necessary context for the Excel methods to work. It accepts two event handlers as props:

• onAddRow: Triggered when a row is added.
• onAddColumn: Triggered when a column is added.

Methods

The useExcel hook provides access to the following methods:

• addRow(): Adds a new row to the Excel workspace.
• addColumn(): Adds a new column to the Excel workspace.
• setPrivateColumns(columns: string[]): Sets the specified columns as private columns.
• getPrivateColumns(): string[]: Returns an array of the current private columns.
• clearPrivateColumns(): Clears all the private columns.
• setEncryptedColumns(columns: string[]): Sets the specified columns as encrypted columns.
• getEncryptedColumns(): string[]: Returns an array of the current encrypted columns.
• clearEncryptedColumns(): Clears all the encrypted columns.
• refreshWorkSpace(): Refreshes the Excel workspace.
• exportToExcel(): Downloads the Excel workspace as an XLSX file.
• exportToJson(): Downloads the Excel workspace as JSON data.
• uploadExcelFile(event: React.ChangeEvent<HTMLInputElement>): Uploads an Excel (XLSX) file to the workspace.
• uploadJsonData(data: any): Uploads JSON data to the workspace.

Feel free to adjust the descriptions and examples as needed for your README file.

That's it! You're ready to start using ts-excel-app in your web application. If you have any further questions or need additional assistance, please let us know.