ts-excel-app v1.0.185
# 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.
9 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago