├── .gitignore ├── README.md ├── dist ├── index.bundle.js └── index.html ├── gulpfile.js ├── package.json ├── src ├── basic-example │ ├── index.css │ └── index.tsx ├── calculate │ ├── index.css │ └── index.tsx ├── edit-border │ ├── index.css │ └── index.tsx ├── edit-cell │ ├── index.css │ └── index.tsx ├── hide-header │ ├── index.css │ └── index.tsx ├── index.css ├── index.html ├── index.tsx └── save-and-load │ ├── index.css │ └── index.tsx ├── tsconfig.json ├── typings ├── node │ └── node.d.ts ├── react │ ├── react-dom.d.ts │ └── react.d.ts └── tsd.d.ts └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | tsd.json -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-gridview-examples 2 | 3 | [react-gridview][] 4 | [Examples][] 5 | 6 | 7 | ## License 8 | 9 | **MIT** 10 | 11 | [react-gridview]: https://github.com/ogaya/react-gridview 12 | [Examples]: http://ogaya.github.io/react-gridview-examples/dist/index.html#basic-example 13 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | React-GridView Examples 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require("gulp"); 2 | var webpack = require("gulp-webpack"); 3 | var webpackConfig = require("./webpack.config.js"); 4 | //var webpackSampleConfig = require("./webpack-sample.config.js"); 5 | 6 | //var requireDir = require("require-dir"); 7 | var uglify = require("gulp-uglify"); 8 | 9 | gulp.task("cleanBuild", function (cb) { 10 | var rimraf = require("rimraf"); 11 | rimraf("./dist/*", cb); 12 | }); 13 | 14 | gulp.task("pack", ["cleanBuild"], function () { 15 | return gulp.src("") 16 | .pipe(webpack(webpackConfig)) 17 | .pipe(uglify()) 18 | .pipe(gulp.dest("")); 19 | }); 20 | 21 | gulp.task("build", ["pack"], function () { 22 | return gulp.src("./src/index.html") 23 | .pipe(gulp.dest("./dist")); 24 | }); 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-gridview-examples", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/ogaya/react-gridview-examples" 12 | }, 13 | "keywords": [ 14 | "react" 15 | ], 16 | "author": "", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/ogaya/react-gridview-examples/issues" 20 | }, 21 | "homepage": "https://github.com/ogaya/react-gridview-examples", 22 | "devDependencies": { 23 | "css-loader": "^0.23.1", 24 | "gulp": "^3.9.0", 25 | "gulp-uglify": "^1.5.1", 26 | "gulp-webpack": "^1.5.0", 27 | "immutable": "^3.7.6", 28 | "raw-loader": "^0.5.1", 29 | "react": "^0.14.6", 30 | "react-bootstrap": "^0.28.2", 31 | "react-dom": "^0.14.6", 32 | "react-gridview": "^0.3.5", 33 | "rimraf": "^2.5.0", 34 | "style-loader": "^0.13.0", 35 | "ts-loader": "^0.7.2", 36 | "typescript": "^1.7.5" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/basic-example/index.css: -------------------------------------------------------------------------------- 1 | .basic-example{ 2 | height: 400px; 3 | } -------------------------------------------------------------------------------- /src/basic-example/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import {GridView} from "react-gridview"; 3 | 4 | export class BasicExample extends React.Component<{}, {}>{ 5 | render() { 6 | return ( 7 | 8 | ); 9 | } 10 | }; 11 | -------------------------------------------------------------------------------- /src/calculate/index.css: -------------------------------------------------------------------------------- 1 | .calculate{ 2 | height: 400px; 3 | } -------------------------------------------------------------------------------- /src/calculate/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { 3 | GridView, 4 | Sheet, 5 | CellPoint, 6 | CellRange, 7 | TEXT_ALIGN 8 | } from "react-gridview"; 9 | 10 | const CALC_COLOR = "#DCEDC8"; 11 | const DATA_COLOR = "#FFF9C4"; 12 | 13 | function createSheet() { 14 | let sheet = Sheet.create(); 15 | sheet = sheet 16 | .editCell(CellPoint.create(2, 2), (cell) => { 17 | return cell 18 | .setTextAlign(TEXT_ALIGN.CENTER) 19 | .setText("a"); 20 | }) 21 | .editCell(CellPoint.create(3, 2), (cell) => { 22 | return cell 23 | .setTextAlign(TEXT_ALIGN.CENTER) 24 | .setText("b"); 25 | }) 26 | .editCell(CellPoint.create(4, 2), (cell) => { 27 | return cell 28 | .setTextAlign(TEXT_ALIGN.CENTER) 29 | .setText("(a+b)*2"); 30 | }) 31 | .editCell(CellPoint.create(1, 13), (cell) => { 32 | return cell 33 | .setTextAlign(TEXT_ALIGN.CENTER) 34 | .setText("SUM"); 35 | }) 36 | .editCell(CellPoint.create(1, 14), (cell) => { 37 | return cell 38 | .setTextAlign(TEXT_ALIGN.CENTER) 39 | .setText("AVG"); 40 | }); 41 | 42 | const range = CellRange.create(CellPoint.create(2, 3), CellPoint.create(3, 12)); 43 | sheet = sheet.editCells(range, (cell, cellPoint) => { 44 | return cell 45 | .setTextAlign(TEXT_ALIGN.CENTER) 46 | .setBackground(DATA_COLOR) 47 | .setText(cellPoint.columnNo + cellPoint.rowNo); 48 | }); 49 | 50 | const calcRange = CellRange.create(CellPoint.create(4, 3), CellPoint.create(4, 12)); 51 | sheet = sheet.editCells(calcRange, (cell, cellPoint) => { 52 | return cell 53 | .setTextAlign(TEXT_ALIGN.CENTER) 54 | .setBackground(CALC_COLOR) 55 | .setText("=(B" + cellPoint.rowNo + "+C" + cellPoint.rowNo + ")*2"); 56 | }); 57 | 58 | sheet = sheet 59 | .editCell(CellPoint.create(2, 13), (cell) => { 60 | return cell 61 | .setTextAlign(TEXT_ALIGN.CENTER) 62 | .setBackground(CALC_COLOR) 63 | .setText("=SUM(B3:B12)"); 64 | }) 65 | .editCell(CellPoint.create(2, 14), (cell) => { 66 | return cell 67 | .setTextAlign(TEXT_ALIGN.CENTER) 68 | .setBackground(CALC_COLOR) 69 | .setText("=AVG(B3:B12)"); 70 | }) 71 | .editCell(CellPoint.create(3, 13), (cell) => { 72 | return cell 73 | .setTextAlign(TEXT_ALIGN.CENTER) 74 | .setBackground(CALC_COLOR) 75 | .setText("=SUM(C3:C12)"); 76 | }) 77 | .editCell(CellPoint.create(3, 14), (cell) => { 78 | return cell 79 | .setTextAlign(TEXT_ALIGN.CENTER) 80 | .setBackground(CALC_COLOR) 81 | .setText("=AVG(C3:C12)"); 82 | }); 83 | 84 | sheet = sheet.setOnChangeCell((prevCell, nextCell) =>{ 85 | if (isNaN(nextCell.value)){ 86 | return prevCell; 87 | } 88 | if (isNaN(Number(prevCell.text))){ 89 | return prevCell; 90 | } 91 | return nextCell; 92 | }); 93 | 94 | return sheet; 95 | } 96 | 97 | export class Calculate extends React.Component<{}, {}>{ 98 | render() { 99 | const sheet = createSheet(); 100 | return ( 101 | 102 | ); 103 | } 104 | }; 105 | -------------------------------------------------------------------------------- /src/edit-border/index.css: -------------------------------------------------------------------------------- 1 | .edit-border{ 2 | height: 400px; 3 | } -------------------------------------------------------------------------------- /src/edit-border/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { 3 | GridView, 4 | Sheet, 5 | CellPoint, 6 | CellRange, 7 | BORDER_POSITION, 8 | Border 9 | } from "react-gridview"; 10 | 11 | function createSheet() { 12 | // Sheet is an Immutable Record 13 | let sheet = Sheet.create(); 14 | 15 | sheet = sheet 16 | .editBorders(CellRange.create(2, 2, 2, 12), BORDER_POSITION.LEFT, 17 | (border) => { 18 | return border 19 | .setWeight(2) 20 | .setColor("#333"); 21 | }) 22 | .editBorders(CellRange.create(6, 2, 6, 12), BORDER_POSITION.RIGHT, 23 | (border) => { 24 | return border 25 | .setWeight(2) 26 | .setColor("#333"); 27 | }) 28 | .editBorders(CellRange.create(2, 2, 6, 2), BORDER_POSITION.TOP, 29 | (border) => { 30 | return border 31 | .setWeight(2) 32 | .setColor("#333"); 33 | }) 34 | .editBorders(CellRange.create(2, 12, 6, 12), BORDER_POSITION.BOTTOM, 35 | (border) => { 36 | return border 37 | .setWeight(2) 38 | .setColor("#333"); 39 | }) 40 | .editBorders(CellRange.create(2, 2, 6, 2), BORDER_POSITION.BOTTOM, 41 | (border) => { 42 | return border 43 | .setWeight(1) 44 | .setColors(["#333", "#FFF", "#333"]); 45 | }) 46 | .editBorders(CellRange.create(2, 3, 6, 11), BORDER_POSITION.BOTTOM, 47 | (border) => { 48 | return border 49 | .setWeight(1) 50 | .setColor("#333") 51 | .setDash([2, 2]); 52 | }); 53 | 54 | return sheet; 55 | } 56 | 57 | export class EditBorder extends React.Component<{}, {}>{ 58 | render() { 59 | const sheet = createSheet(); 60 | return ( 61 | 62 | ); 63 | } 64 | }; 65 | -------------------------------------------------------------------------------- /src/edit-cell/index.css: -------------------------------------------------------------------------------- 1 | .edit-cell{ 2 | height: 400px; 3 | } -------------------------------------------------------------------------------- /src/edit-cell/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { 3 | GridView, 4 | Sheet, 5 | CellPoint, 6 | CellRange, 7 | TEXT_ALIGN, 8 | VERTICAL_ALIGN 9 | } from "react-gridview"; 10 | 11 | function createSheet() { 12 | // Sheet is an Immutable Record 13 | let sheet = Sheet.create(); 14 | 15 | // edit cells 16 | const range = CellRange.create(CellPoint.create(3, 3), CellPoint.create(6, 12)); 17 | sheet = sheet.editCells(range, (cell, cellPoint) => { 18 | return cell 19 | .setValue(cellPoint.columnNo + cellPoint.rowNo) 20 | .setTextAlign(TEXT_ALIGN.CENTER); 21 | }); 22 | 23 | // merge Cells 24 | sheet = sheet 25 | .mergeRange(CellRange.create(3, 2, 4, 2)) 26 | .mergeRange(CellRange.create(5, 2, 6, 2)) 27 | .mergeRange(CellRange.create(2, 3, 2, 12)) 28 | .editCell(CellPoint.create(3, 2), (cell) => { 29 | return cell 30 | .setValue("merge1") 31 | .setBackground("#0D47A1") 32 | .setFont("14pt Arial") 33 | .setTextColor("#FFF") 34 | .setTextAlign(TEXT_ALIGN.CENTER); 35 | }) 36 | .editCell(CellPoint.create(5, 2), (cell) => { 37 | return cell 38 | .setValue("merge2") 39 | .setBackground("#b71c1c") 40 | .setFont("14pt Arial") 41 | .setTextColor("#FFF") 42 | .setTextAlign(TEXT_ALIGN.CENTER); 43 | }) 44 | .editCell(CellPoint.create(2, 3), (cell) => { 45 | return cell 46 | .setValue("merge3") 47 | .setBackground("#BF360C") 48 | .setFont("14pt Arial") 49 | .setTextColor("#FFF") 50 | .setTextAlign(TEXT_ALIGN.CENTER); 51 | }); 52 | 53 | return sheet; 54 | } 55 | 56 | export class EditCell extends React.Component<{}, {}>{ 57 | render() { 58 | const sheet = createSheet(); 59 | return ( 60 | 61 | ); 62 | } 63 | }; 64 | -------------------------------------------------------------------------------- /src/hide-header/index.css: -------------------------------------------------------------------------------- 1 | .hide-header{ 2 | height: 400px; 3 | } -------------------------------------------------------------------------------- /src/hide-header/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { 3 | GridView, 4 | Sheet, 5 | CellPoint, 6 | CellRange, 7 | BORDER_POSITION, 8 | Border 9 | } from "react-gridview"; 10 | 11 | function createSheet() { 12 | return Sheet 13 | .create() 14 | .editColumnHeader((columnHeader)=>{ 15 | return columnHeader.setVisible(false); 16 | }) 17 | .editRowHeader((rowHeader)=>{ 18 | return rowHeader.setVisible(false); 19 | }); 20 | } 21 | 22 | export class HideHeader extends React.Component<{}, {}>{ 23 | render() { 24 | const sheet = createSheet(); 25 | return ( 26 | 27 | ); 28 | } 29 | }; 30 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | .page{ 2 | padding-top: 60px; 3 | } 4 | 5 | .tab-com{ 6 | margin: 10px 1px 1px 1px; 7 | } 8 | 9 | .ctab > a { 10 | outline: none; 11 | } 12 | 13 | .code-text{ 14 | resize: vertical; 15 | width: 100%; 16 | height: 400px; 17 | } 18 | 19 | .mnav > li > a { 20 | outline: none; 21 | } -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | React-GridView Examples 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | /// 2 | import * as React from "react"; 3 | import * as ReactDOM from "react-dom"; 4 | import "./index.css"; 5 | 6 | const Nav = require("react-bootstrap").Nav; 7 | const Navbar = require("react-bootstrap").Navbar; 8 | const NavItem = require("react-bootstrap").NavItem; 9 | const NavDropdown = require("react-bootstrap").NavDropdown; 10 | const MenuItem = require("react-bootstrap").MenuItem; 11 | 12 | const Grid = require("react-bootstrap").Grid; 13 | const Col = require("react-bootstrap").Col; 14 | const Row = require("react-bootstrap").Row; 15 | 16 | const Input = require("react-bootstrap").Input; 17 | 18 | const Tab = require("react-bootstrap").Tab; 19 | const Tabs = require("react-bootstrap").Tabs; 20 | 21 | import {BasicExample} from "./basic-example"; 22 | import "./basic-example/index.css"; 23 | const BasicExampleSrc = require("!raw!./basic-example/index"); 24 | const BasicExampleCss = require("!raw!./basic-example/index.css"); 25 | 26 | import {EditCell} from "./edit-cell"; 27 | import "./edit-cell/index.css"; 28 | const EditCellSrc = require("!raw!./edit-cell/index"); 29 | const EditCellCss = require("!raw!./edit-cell/index.css"); 30 | 31 | import {EditBorder} from "./edit-border"; 32 | import "./edit-border/index.css"; 33 | const EditBorderSrc = require("!raw!./edit-border/index"); 34 | const EditBorderCss = require("!raw!./edit-border/index.css"); 35 | 36 | import {HideHeader} from "./hide-header"; 37 | import "./hide-header/index.css"; 38 | const HideHeaderSrc = require("!raw!./hide-header/index"); 39 | const HideHeaderCss = require("!raw!./hide-header/index.css"); 40 | 41 | import {SaveAndLoad} from "./save-and-load"; 42 | import "./save-and-load/index.css"; 43 | const SaveAndLoadSrc = require("!raw!./save-and-load/index"); 44 | const SaveAndLoadCss = require("!raw!./save-and-load/index.css"); 45 | 46 | import {Calculate} from "./calculate"; 47 | import "./calculate/index.css"; 48 | const CalculateSrc = require("!raw!./calculate/index"); 49 | const CalculateCss = require("!raw!./calculate/index.css"); 50 | 51 | interface State { 52 | hash: string; 53 | tabKey: number; 54 | } 55 | 56 | const BASIC_EXAMPLE_HASH = "#basic-example"; 57 | const EDIT_CELL_HASH = "#edit-cell"; 58 | const EDIT_BORDER_HASH = "#edit-border"; 59 | const HIDE_HEADER_HASH = "#hide-header"; 60 | const SAVE_LOAD_HASH = "#save-and-load"; 61 | const CALCULATE_HASH = "#calculate"; 62 | 63 | function pickDemo(hash:string){ 64 | switch(hash){ 65 | case BASIC_EXAMPLE_HASH: 66 | return ; 67 | case EDIT_CELL_HASH: 68 | return ; 69 | case EDIT_BORDER_HASH: 70 | return ; 71 | case HIDE_HEADER_HASH: 72 | return ; 73 | case SAVE_LOAD_HASH: 74 | return ; 75 | case CALCULATE_HASH: 76 | return ; 77 | default: 78 | return
; 79 | } 80 | } 81 | 82 | function pickSrc(hash:string){ 83 | switch(hash){ 84 | case BASIC_EXAMPLE_HASH: 85 | return BasicExampleSrc; 86 | case EDIT_CELL_HASH: 87 | return EditCellSrc; 88 | case EDIT_BORDER_HASH: 89 | return EditBorderSrc; 90 | case HIDE_HEADER_HASH: 91 | return HideHeaderSrc; 92 | case SAVE_LOAD_HASH: 93 | return SaveAndLoadSrc; 94 | case CALCULATE_HASH: 95 | return CalculateSrc; 96 | default: 97 | return ""; 98 | } 99 | } 100 | 101 | function pickCss(hash:string){ 102 | switch(hash){ 103 | case BASIC_EXAMPLE_HASH: 104 | return BasicExampleCss; 105 | case EDIT_CELL_HASH: 106 | return EditCellCss; 107 | case EDIT_BORDER_HASH: 108 | return EditBorderCss; 109 | case HIDE_HEADER_HASH: 110 | return HideHeaderCss; 111 | case SAVE_LOAD_HASH: 112 | return SaveAndLoadCss; 113 | case CALCULATE_HASH: 114 | return CalculateCss; 115 | default: 116 | return ""; 117 | } 118 | } 119 | 120 | class Main extends React.Component<{}, State>{ 121 | state: State = { 122 | hash: location.hash, 123 | tabKey: 1 124 | }; 125 | componentDidMount() { 126 | window.onhashchange = () => { 127 | this.setState((prevState)=>{ 128 | prevState.hash = location.hash; 129 | return prevState; 130 | }); 131 | }; 132 | } 133 | private _tabSelect = (key)=>{ 134 | this.setState((prevState)=>{ 135 | prevState.tabKey = key; 136 | return prevState; 137 | }); 138 | } 139 | render() { 140 | const hash = this.state.hash; 141 | return ( 142 |
143 | 144 | 145 | 146 | React-GridView Examples 147 | 148 | 149 | 150 | 151 | 154 | 155 | 156 | 157 | 158 | 166 | 167 | 168 | 169 | 170 | {pickDemo(hash)} 171 | 172 | 173 |