You can get the row action options using the tableSheet.rowActionOptions()
method.
You can customize it using tableSheet.rowActionOptions(rowActionOptions), where rowActionOptions includes the following:
Operation
Type
Description
name
string
The name of the option
icons
(string | GC.Spread.Sheets.ButtonImageType)[]
An icon that indicates the different statuses
iconSelector
(item: any, index: number) => number | boolean
Select a icon according to different status
tooltip
string
the tooltip for the row action
command
string
the name of the command when clicking the row action
shortcutKey
GC.Spread.Sheets.TableSheet.IShortcutKey
the shortcut key of the command for the row action
Adding a row action for having a comment can be done with the following code:
Adding a row action for showing a comment can be done as follows:
Specify a command to the default first row action as follows:
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import './styles.css';
import { AppFunc } from './app-func';
import { App } from './app-class';
// 1. Functional Component sample
createRoot(document.getElementById('app')).render(<AppFunc />);
// 2. Class Component sample
// createRoot(document.getElementById('app')).render(<App />);
/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import "@mescius/spread-sheets-tablesheet";
import { SpreadSheets } from '@mescius/spread-sheets-react';
import './styles.css';
const useState = React.useState;
var tableName = "Employee";
var baseApiUrl = getBaseApiUrl();
var apiUrl = baseApiUrl + "/" + tableName;
var ShowComment = "ShowComment";
var CheckRow = "CheckRow";
export function AppFunc() {
const [checkMap, setCheckMap] = useState({});
const initSpread = (spread) => {
spread.suspendPaint();
spread.clearSheets();
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
//init a data manager
var dataManager = spread.dataManager();
var myTable = dataManager.addTable("myTable", {
remote: {
read: {
url: apiUrl
},
update: {
url: apiUrl,
method: 'PUT'
},
create: {
url: apiUrl
},
delete: {
url: apiUrl
}
},
autoSync: true
});
//init a table sheet
var sheet = spread.addSheetTab(0, "MyTableSheet", GC.Spread.Sheets.SheetType.tableSheet);
var options = sheet.rowActionOptions();
// Specify a command to the default first row action
var defaultFirstRowAction = options[0];
defaultFirstRowAction.command = GC.Spread.Sheets.TableSheet.BuiltInRowActions.pinRow.command;
//add a action of check/uncheck
options.push({
name: 'check',
icons: ["data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9InRyYW5zcGFyZW50Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMEgwVjEySDEyVjBaTTEgMTFWMUgxMVYxMUgxWiIgZmlsbD0iIzY2NjY2NiIvPgo8L3N2Zz4K", "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9InRyYW5zcGFyZW50Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMEgwVjEySDEyVjBaTTEgMTFWMUgxMVYxMUgxWiIgZmlsbD0iIzY2NjY2NiIvPgo8cGF0aCBkPSJNNS4yNSA5TDIgNS42MTI5TDMuMDA3MTQgNC41NjMyOEw1LjI1IDYuODkzM0w4Ljk4NTcxIDNMMTAgNC4wNDk2M0w1LjI1IDlINS4yNVoiIGZpbGw9IiM2NjY2NjYiLz4KPC9zdmc+Cg=="],
tooltip: "Check/Uncheck",
iconSelector: function (item) {
return !!checkMap[item.Id];
},
command: CheckRow
});
//show the comment flag if the data has a comment
options.push({
name: 'comment',
icons: ["./image/comment.png"],
tooltip: "Show the comment",
iconSelector: function (item) {
return item.Notes ? item.Notes.length > 0 : false;
},
shortcutKey: { key: 65 /* A */, ctrl: true, alt: true },
command: ShowComment
});
//show the attachment flag if the data has a attachment
options.push({
name: 'attachment',
icons: ["./image/attachment.png"],
tooltip: "Attachment",
iconSelector: function (item) {
return item.PhotoPath ? item.PhotoPath.length > 0 : false;
}
});
sheet.rowActionOptions(options);
//bind a view to the table sheet
myTable.fetch().then(function () {
var view = myTable.addView("myView", [
{ value: "Id", width: 50, caption: "ID" },
{ value: "FirstName", width: 100, caption: "First Name" },
{ value: "LastName", width: 100, caption: "Last Name" },
{ value: "HomePhone", width: 150, caption: "Phone" },
{ value: "PhotoPath", width: 150, caption: "Attachment" },
{ value: "Notes", width: 400, caption: "Comments" },
]);
sheet.setDataView(view);
});
spread.resumePaint();
}
const registerCommands = () => {
var Commands = GC.Spread.Sheets.Commands;
Commands[ShowComment] = {
canUndo: false,
execute: function (context, options) {
alert(options.item.Notes);
return true;
}
};
Commands[CheckRow] = {
canUndo: false,
execute: function (context, options) {
var id = options.item.Id;
checkMap[id] = !checkMap[id];
setCheckMap(checkMap);
return true;
}
};
}
return (<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => {
//register self-defined row action command
registerCommands();
initSpread(spread);
}}></SpreadSheets>
</div>
</div>);
}
function getBaseApiUrl() {
return window.location.href.match(/http.+spreadjs\/demos\//)[0] + 'server/api';
}
/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import "@mescius/spread-sheets-tablesheet";
import { SpreadSheets } from '@mescius/spread-sheets-react';
import './styles.css';
const Component = React.Component;
var tableName = "Employee";
var baseApiUrl = getBaseApiUrl();
var apiUrl = baseApiUrl + "/" + tableName;
var ShowComment = "ShowComment";
var CheckRow = "CheckRow";
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
this.tablesheet = null;
this.state = {
checkMap: {},
newRowVisible: true
};
}
render() {
const {
newRowVisible
} = this.state;
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => {
//register self-defined row action command
this.registerCommands();
this.initSpread(spread);
}}></SpreadSheets>
</div>
</div>
);
}
initSpread(spread) {
this.spread = spread;
spread.suspendPaint();
spread.clearSheets();
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
//init a data manager
var dataManager = spread.dataManager();
var myTable = dataManager.addTable("myTable", {
remote: {
read: {
url: apiUrl
},
update: {
url: apiUrl,
method: 'PUT'
},
create: {
url: apiUrl
},
delete: {
url: apiUrl
}
},
autoSync: true
});
//init a table sheet
var sheet = spread.addSheetTab(0, "MyTableSheet", GC.Spread.Sheets.SheetType.tableSheet);
this.tablesheet = sheet;
var options = sheet.rowActionOptions();
var _this = this;
// Specify a command to the default first row action
var defaultFirstRowAction = options[0];
defaultFirstRowAction.command = GC.Spread.Sheets.TableSheet.BuiltInRowActions.pinRow.command;
//add a action of check/uncheck
options.push({
name: 'check',
icons: ["data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9InRyYW5zcGFyZW50Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMEgwVjEySDEyVjBaTTEgMTFWMUgxMVYxMUgxWiIgZmlsbD0iIzY2NjY2NiIvPgo8L3N2Zz4K", "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9InRyYW5zcGFyZW50Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMEgwVjEySDEyVjBaTTEgMTFWMUgxMVYxMUgxWiIgZmlsbD0iIzY2NjY2NiIvPgo8cGF0aCBkPSJNNS4yNSA5TDIgNS42MTI5TDMuMDA3MTQgNC41NjMyOEw1LjI1IDYuODkzM0w4Ljk4NTcxIDNMMTAgNC4wNDk2M0w1LjI1IDlINS4yNVoiIGZpbGw9IiM2NjY2NjYiLz4KPC9zdmc+Cg=="],
tooltip: "Check/Uncheck",
iconSelector: function (item) {
return !!_this.state.checkMap[item.Id];
},
command: CheckRow
});
//show the comment flag if the data has a comment
options.push({
name: 'comment',
icons: ["./image/comment.png"],
tooltip: "Show the comment",
iconSelector: function (item) {
return item.Notes ? item.Notes.length > 0 : false;
},
shortcutKey: { key: 65 /* A */, ctrl: true, alt: true },
command: ShowComment
});
//show the attachment flag if the data has a attachment
options.push({
name: 'attachment',
icons: ["./image/attachment.png"],
tooltip: "Attachment",
iconSelector: function (item) {
return item.PhotoPath ? item.PhotoPath.length > 0 : false;
}
});
sheet.rowActionOptions(options);
//bind a view to the table sheet
myTable.fetch().then(function () {
var view = myTable.addView("myView", [
{ value: "Id", width: 50, caption: "ID" },
{ value: "FirstName", width: 100, caption: "First Name" },
{ value: "LastName", width: 100, caption: "Last Name" },
{ value: "HomePhone", width: 150, caption: "Phone" },
{ value: "PhotoPath", width: 150, caption: "Attachment" },
{ value: "Notes", width: 400, caption: "Comments" },
]);
sheet.setDataView(view);
});
spread.resumePaint();
}
registerCommands() {
var _this = this;
var Commands = GC.Spread.Sheets.Commands;
Commands[ShowComment] = {
canUndo: false,
execute: function (context, options) {
alert(options.item.Notes);
return true;
}
};
Commands[CheckRow] = {
canUndo: false,
execute: function (context, options) {
var id = options.item.Id;
var checkMap = _this.state.checkMap;
checkMap[id] = !checkMap[id];
_this.setState({ checkMap });
return true;
}
};
}
}
function getBaseApiUrl() {
return window.location.href.match(/http.+spreadjs\/demos\//)[0] + 'server/api';
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SystemJS -->
<script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('$DEMOROOT$/en/lib/react/license.js').then(function () {
System.import('./src/app');
});
</script>
</head>
<body>
<div id="app" style="height: 100%;"></div>
</body>
</html>
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true,
react: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-tablesheet': 'npm:@mescius/spread-sheets-tablesheet/index.js',
'@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'react': 'npm:react/cjs/react.production.js',
'react-dom': 'npm:react-dom/cjs/react-dom.production.js',
'react-dom/client': 'npm:react-dom/cjs/react-dom-client.production.js',
'scheduler': 'npm:scheduler/cjs/scheduler.production.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'jsx'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
