ts-excel-app
v1.0.185
Published
``` # ts-excel-app
Downloads
4
Readme
# 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 isfalse
.showAddColumn
(boolean, optional): Determines whether to show the "Add Column" button. Default isfalse
.headerStyle
(Object): Pass a object of style properties to override the default style of headerscellStyle
(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.