構文
引数
説明
lookup_value
(必須) 参照する値、セル
lookup_array
(必須) 検索する配列または範囲
[match_mode]
(オプション) 一致の種類を指定します。0 - 完全一致 (既定)。見つからない場合は、#N/A が返されます。-1 - 完全一致。 見つからない場合は、次の小さなアイテムが返されます。1 - 完全一致。 見つからない場合は、次の大きなアイテムが返されます。2 - *、?、および ～ が特別な意味を持つワイルドカードの一致。
[search_mode]
(オプション) 使用する検索モードを指定します。1 - 先頭の項目から検索を実行します。 これが既定の設定です。-1 - 末尾の項目から逆方向に検索を実行します。2 - 昇順で並べ替えられた検索範囲を使用してバイナリ検索を実行します。 並べ替えられていない場合、無効な結果が返されます。-2 - 降順で並べ替えられた検索範囲を使用してバイナリ検索を実行します。 並べ替えられていない場合、無効な結果が返されます。
使用時の注意点
XMATCH関数は、ルックアップを実行して位置を返します。XMATCHは、垂直方向または水平方向の範囲で検索を実行でき、MATCH関数のより柔軟で強力な後継関数です。 XLOOKUPは、近似一致と完全一致の両方をサポートし、部分一致の場合はワイルドカード（* ? XLOOKUP関数と同様に、XMATCHは最初の値または最後の値からデータを検索することができます（逆検索）。また、XMATCHはバイナリ検索を実行することができ、特に高速化のために最適化されています。
ポリシー
XMATCHは垂直方向と水平方向のデータを扱うことができます。
XMATCHは検索した値が見つからない場合、#N/Aを返します。
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 />);
import * as React from 'react';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-resources-ja';
GC.Spread.Common.CultureManager.culture("ja-jp");
import './styles.css';
export function AppFunc() {
const initSpread = (spread) => {
spread.options.allowDynamicArray = true;
initStyles(spread);
spread.setSheetCount(4);
spread.suspendPaint();
spread.suspendCalcService();
initSheet1(spread.getSheet(0));
initSheet2(spread.getSheet(1));
initSheet3(spread.getSheet(2));
initSheet4(spread.getSheet(3));
spread.resumeCalcService();
spread.resumePaint();
}
const initStyles = (spread) => {
var introStyle = new GC.Spread.Sheets.Style();
introStyle.name = 'intro';
introStyle.font = 'normal bold 16px Segoe UI';
introStyle.foreColor = "#172b4d";
spread.addNamedStyle(introStyle);
var introStyle1 = new GC.Spread.Sheets.Style();
introStyle1.name = 'intro1';
introStyle1.font = 'normal bold 14px Calibri';
introStyle1.hAlign = 0;
introStyle1.vAlign = 1;
introStyle1.foreColor = "#172b4d";
spread.addNamedStyle(introStyle1);
var formulaStyle = new GC.Spread.Sheets.Style();
formulaStyle.name = 'formula';
formulaStyle.font = 'normal bold 12px Consolas';
formulaStyle.foreColor = "#c00000";
introStyle1.vAlign = 1;
spread.addNamedStyle(formulaStyle);
var tableHeaderStyle = new GC.Spread.Sheets.Style();
tableHeaderStyle.name = 'tableHeader';
tableHeaderStyle.font = "normal bold 14.7px Calibri";
tableHeaderStyle.hAlign = 1;
tableHeaderStyle.backColor = "#d9e1f2";
spread.addNamedStyle(tableHeaderStyle);
var tableContentStyle = new GC.Spread.Sheets.Style();
tableContentStyle.name = 'tableContent';
tableContentStyle.font = "normal normal 14.7px Calibri";
tableContentStyle.hAlign = 1;
spread.addNamedStyle(tableContentStyle);
var sourceStyle = new GC.Spread.Sheets.Style();
sourceStyle.name = 'source';
sourceStyle.hAlign = 0;
sourceStyle.backColor = "#fce8ce";
spread.addNamedStyle(sourceStyle);
var resultStyle = new GC.Spread.Sheets.Style();
resultStyle.name = 'result';
resultStyle.hAlign = 0;
resultStyle.backColor = "#e2efda";
spread.addNamedStyle(resultStyle);
}
const initSheet1 = (sheet) => {
sheet.name('Use Case');
var table1Source = {
name: 'Quarterly Employee Commissions',
data: [
{ salesRap: 'Jim', quarter: 'Q1', revenue: 351 },
{ salesRap: 'Jim', quarter: 'Q2', revenue: 210 },
{ salesRap: 'Kevin', quarter: 'Q1', revenue: 687 },
{ salesRap: 'Sarah', quarter: 'Q1', revenue: 300 },
{ salesRap: 'Sarah', quarter: 'Q2', revenue: 809 },
{ salesRap: 'Kevin', quarter: 'Q2', revenue: 285 },
{ salesRap: 'Bob', quarter: 'Q1', revenue: 110 }
]
};
sheet.addSpan(1, 1, 1, 6);
sheet.setValue(1, 1, table1Source.name);
sheet.getCell(1, 1).hAlign(1).font("normal bold 15px Calibri");
sheet.setColumnWidth(1, 83);
sheet.setColumnWidth(2, 73);
sheet.setColumnWidth(3, 77);
sheet.setColumnWidth(4, 122);
sheet.setColumnWidth(5, 134);
sheet.setColumnWidth(6, 98);
var table1 = sheet.tables.add('Table1', 2, 1, 7, 6);
table1.style(GC.Spread.Sheets.Tables.TableThemes.medium2);
var table1Column1 = new GC.Spread.Sheets.Tables.TableColumn(1, "salesRap", "Sales Rap");
var table1Column2 = new GC.Spread.Sheets.Tables.TableColumn(2, "quarter", "Quarter");
var table1Column3 = new GC.Spread.Sheets.Tables.TableColumn(3, "revenue", "Revenue");
var table1Column4 = new GC.Spread.Sheets.Tables.TableColumn(4, null, "Comm Category");
var table1Column5 = new GC.Spread.Sheets.Tables.TableColumn(5, null, "Comm Percentage", "0%");
var table1Column6 = new GC.Spread.Sheets.Tables.TableColumn(6, null, "Commission");
table1.autoGenerateColumns(false);
table1.bind([table1Column1, table1Column2, table1Column3, table1Column4, table1Column5, table1Column6], 'data', table1Source);
var table2Source = {
name: "Commissions Table",
data: [
{ category: 1, sales: 100, percentage: 0.05 },
{ category: 2, sales: 200, percentage: 0.1 },
{ category: 3, sales: 400, percentage: 0.15 },
{ category: 4, sales: 800, percentage: 0.20 }
]
};
sheet.addSpan(1, 8, 1, 3);
sheet.setValue(1, 8, table2Source.name);
sheet.getCell(1, 8).hAlign(1).font("normal bold 15px Calibri");
sheet.setColumnWidth(8, 88);
sheet.setColumnWidth(9, 57);
sheet.setColumnWidth(10, 91);
var table2 = sheet.tables.add('Table2', 2, 8, 4, 3);
table2.style(GC.Spread.Sheets.Tables.TableThemes.medium2);
var table2Column1 = new GC.Spread.Sheets.Tables.TableColumn(1, "category", "Category");
var table2Column2 = new GC.Spread.Sheets.Tables.TableColumn(2, "sales", "Sales");
var table2Column3 = new GC.Spread.Sheets.Tables.TableColumn(3, "percentage", "Percentage", "0%");
table2.autoGenerateColumns(false);
table2.bind([table2Column1, table2Column2, table2Column3], 'data', table2Source);
table1.setColumnDataFormula(3, '=XMATCH([@Revenue],Table2[Sales],-1,1)');
table1.setColumnDataFormula(4, '=XLOOKUP([@[Comm Category]],Table2[Category],Table2[Percentage],0,0,1)');
table1.setColumnDataFormula(5, '=[@Revenue]*[@[Comm Percentage]]');
}
const initSheet2 = (sheet) => {
sheet.name('basic exact match');
var intro = '#1 - basic exact match';
var formula = '=XMATCH(H5,B6:B10)';
sheet.setValue(1, 1, intro);
sheet.setStyle(1, 1, 'intro');
sheet.setValue(2, 1, formula);
sheet.setStyle(2, 1, 'formula');
var data = [
["Movie", "Year", "Rank", "Sales"],
["Fargo", 1996, 5, 61],
["L.A. Confidential", 1997, 4, 126],
["The Sixth Sense", 1999, 1, 673],
["Toy Story", 1995, 2, 362],
["Unforgiven", 1992, 3, 159]
];
sheet.setArray(4, 1, data);
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < data[i].length; j++) {
var styleName;
if (i === 0) {
styleName = 'tableHeader';
} else {
styleName = 'tableContent';
}
sheet.setStyle(4 + i, 1 + j, styleName);
}
}
sheet.setColumnWidth(1, 126);
sheet.setValue(4, 6, 'Movie');
sheet.setStyle(4, 6, 'source');
sheet.setValue(5, 6, 'Position');
sheet.setStyle(5, 6, 'result');
sheet.setValue(4, 7, 'Toy Story');
sheet.setFormula(5, 7, formula);
}
const initSheet3 = (sheet) => {
sheet.name('basic approximate match');
var intro = '#2 - basic approximate match';
var formula = '=XMATCH(H5,E6:E10,1)';
sheet.setValue(1, 1, intro);
sheet.setStyle(1, 1, 'intro');
sheet.setValue(2, 1, formula);
sheet.setStyle(2, 1, 'formula');
var data = [
["Movie", "Year", "Rank", "Sales"],
["Fargo", 1996, 5, 61],
["L.A. Confidential", 1997, 4, 126],
["The Sixth Sense", 1999, 1, 673],
["Toy Story", 1995, 2, 362],
["Unforgiven", 1992, 3, 159]
];
sheet.setArray(4, 1, data);
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < data[i].length; j++) {
var styleName;
if (i === 0) {
styleName = 'tableHeader';
} else {
styleName = 'tableContent';
}
sheet.setStyle(4 + i, 1 + j, styleName);
}
}
sheet.setColumnWidth(1, 126);
sheet.setValue(4, 6, 'Sales');
sheet.setStyle(4, 6, 'source');
sheet.setValue(5, 6, 'Position');
sheet.setStyle(5, 6, 'result');
sheet.setValue(4, 7, 400);
sheet.setFormula(5, 7, formula);
}
const initSheet4 = (sheet) => {
sheet.name('multiple values');
var intro = '#3 - multiple values';
var formula = '=XMATCH({5,4,1},D6:D10)';
sheet.setValue(1, 1, intro);
sheet.setStyle(1, 1, 'intro');
sheet.setValue(2, 1, formula);
sheet.setStyle(2, 1, 'formula');
var data = [
["Movie", "Year", "Rank", "Sales"],
["Fargo", 1996, 5, 61],
["L.A. Confidential", 1997, 4, 126],
["The Sixth Sense", 1999, 1, 673],
["Toy Story", 1995, 2, 362],
["Unforgiven", 1992, 3, 159]
];
sheet.setArray(4, 1, data);
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < data[i].length; j++) {
var styleName;
if (i === 0) {
styleName = 'tableHeader';
} else {
styleName = 'tableContent';
}
sheet.setStyle(4 + i, 1 + j, styleName);
}
}
sheet.setColumnWidth(1, 126);
sheet.setValue(4, 6, 'Rank');
sheet.setStyle(4, 6, 'source');
sheet.setValue(5, 6, 'Position');
sheet.setStyle(5, 6, 'result');
sheet.setValue(4, 7, '{5,4,1}');
sheet.setFormula(5, 7, formula);
}
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
</div>
);
}
import * as React from 'react';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-resources-ja';
GC.Spread.Common.CultureManager.culture("ja-jp");
import './styles.css';
const Component = React.Component;
export class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
</div>
);
}
initSpread(spread) {
spread.options.allowDynamicArray = true;
this.initStyles(spread);
spread.setSheetCount(4);
spread.suspendPaint();
spread.suspendCalcService();
this.initSheet1(spread.getSheet(0));
this.initSheet2(spread.getSheet(1));
this.initSheet3(spread.getSheet(2));
this.initSheet4(spread.getSheet(3));
spread.resumeCalcService();
spread.resumePaint();
}
initStyles(spread) {
var introStyle = new GC.Spread.Sheets.Style();
introStyle.name = 'intro';
introStyle.font = 'normal bold 16px Segoe UI';
introStyle.foreColor = "#172b4d";
spread.addNamedStyle(introStyle);
var introStyle1 = new GC.Spread.Sheets.Style();
introStyle1.name = 'intro1';
introStyle1.font = 'normal bold 14px Calibri';
introStyle1.hAlign = 0;
introStyle1.vAlign = 1;
introStyle1.foreColor = "#172b4d";
spread.addNamedStyle(introStyle1);
var formulaStyle = new GC.Spread.Sheets.Style();
formulaStyle.name = 'formula';
formulaStyle.font = 'normal bold 12px Consolas';
formulaStyle.foreColor = "#c00000";
introStyle1.vAlign = 1;
spread.addNamedStyle(formulaStyle);
var tableHeaderStyle = new GC.Spread.Sheets.Style();
tableHeaderStyle.name = 'tableHeader';
tableHeaderStyle.font = "normal bold 14.7px Calibri";
tableHeaderStyle.hAlign = 1;
tableHeaderStyle.backColor = "#d9e1f2";
spread.addNamedStyle(tableHeaderStyle);
var tableContentStyle = new GC.Spread.Sheets.Style();
tableContentStyle.name = 'tableContent';
tableContentStyle.font = "normal normal 14.7px Calibri";
tableContentStyle.hAlign = 1;
spread.addNamedStyle(tableContentStyle);
var sourceStyle = new GC.Spread.Sheets.Style();
sourceStyle.name = 'source';
sourceStyle.hAlign = 0;
sourceStyle.backColor = "#fce8ce";
spread.addNamedStyle(sourceStyle);
var resultStyle = new GC.Spread.Sheets.Style();
resultStyle.name = 'result';
resultStyle.hAlign = 0;
resultStyle.backColor = "#e2efda";
spread.addNamedStyle(resultStyle);
}
initSheet1(sheet) {
sheet.name('Use Case');
var table1Source = {
name: 'Quarterly Employee Commissions',
data: [
{ salesRap: 'Jim', quarter: 'Q1', revenue: 351 },
{ salesRap: 'Jim', quarter: 'Q2', revenue: 210 },
{ salesRap: 'Kevin', quarter: 'Q1', revenue: 687 },
{ salesRap: 'Sarah', quarter: 'Q1', revenue: 300 },
{ salesRap: 'Sarah', quarter: 'Q2', revenue: 809 },
{ salesRap: 'Kevin', quarter: 'Q2', revenue: 285 },
{ salesRap: 'Bob', quarter: 'Q1', revenue: 110 }
]
};
sheet.addSpan(1, 1, 1, 6);
sheet.setValue(1, 1, table1Source.name);
sheet.getCell(1, 1).hAlign(1).font("normal bold 15px Calibri");
sheet.setColumnWidth(1, 83);
sheet.setColumnWidth(2, 73);
sheet.setColumnWidth(3, 77);
sheet.setColumnWidth(4, 122);
sheet.setColumnWidth(5, 134);
sheet.setColumnWidth(6, 98);
var table1 = sheet.tables.add('Table1', 2, 1, 7, 6);
table1.style(GC.Spread.Sheets.Tables.TableThemes.medium2);
var table1Column1 = new GC.Spread.Sheets.Tables.TableColumn(1, "salesRap", "Sales Rap");
var table1Column2 = new GC.Spread.Sheets.Tables.TableColumn(2, "quarter", "Quarter");
var table1Column3 = new GC.Spread.Sheets.Tables.TableColumn(3, "revenue", "Revenue");
var table1Column4 = new GC.Spread.Sheets.Tables.TableColumn(4, null, "Comm Category");
var table1Column5 = new GC.Spread.Sheets.Tables.TableColumn(5, null, "Comm Percentage", "0%");
var table1Column6 = new GC.Spread.Sheets.Tables.TableColumn(6, null, "Commission");
table1.autoGenerateColumns(false);
table1.bind([table1Column1, table1Column2, table1Column3, table1Column4, table1Column5, table1Column6], 'data', table1Source);
var table2Source = {
name: "Commissions Table",
data: [
{ category: 1, sales: 100, percentage: 0.05 },
{ category: 2, sales: 200, percentage: 0.1 },
{ category: 3, sales: 400, percentage: 0.15 },
{ category: 4, sales: 800, percentage: 0.20 }
]
};
sheet.addSpan(1, 8, 1, 3);
sheet.setValue(1, 8, table2Source.name);
sheet.getCell(1, 8).hAlign(1).font("normal bold 15px Calibri");
sheet.setColumnWidth(8, 88);
sheet.setColumnWidth(9, 57);
sheet.setColumnWidth(10, 91);
var table2 = sheet.tables.add('Table2', 2, 8, 4, 3);
table2.style(GC.Spread.Sheets.Tables.TableThemes.medium2);
var table2Column1 = new GC.Spread.Sheets.Tables.TableColumn(1, "category", "Category");
var table2Column2 = new GC.Spread.Sheets.Tables.TableColumn(2, "sales", "Sales");
var table2Column3 = new GC.Spread.Sheets.Tables.TableColumn(3, "percentage", "Percentage", "0%");
table2.autoGenerateColumns(false);
table2.bind([table2Column1, table2Column2, table2Column3], 'data', table2Source);
table1.setColumnDataFormula(3, '=XMATCH([@Revenue],Table2[Sales],-1,1)');
table1.setColumnDataFormula(4, '=XLOOKUP([@[Comm Category]],Table2[Category],Table2[Percentage],0,0,1)');
table1.setColumnDataFormula(5, '=[@Revenue]*[@[Comm Percentage]]');
}
initSheet2(sheet) {
sheet.name('basic exact match');
var intro = '#1 - basic exact match';
var formula = '=XMATCH(H5,B6:B10)';
sheet.setValue(1, 1, intro);
sheet.setStyle(1, 1, 'intro');
sheet.setValue(2, 1, formula);
sheet.setStyle(2, 1, 'formula');
var data = [
["Movie", "Year", "Rank", "Sales"],
["Fargo", 1996, 5, 61],
["L.A. Confidential", 1997, 4, 126],
["The Sixth Sense", 1999, 1, 673],
["Toy Story", 1995, 2, 362],
["Unforgiven", 1992, 3, 159]
];
sheet.setArray(4, 1, data);
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < data[i].length; j++) {
var styleName;
if (i === 0) {
styleName = 'tableHeader';
} else {
styleName = 'tableContent';
}
sheet.setStyle(4 + i, 1 + j, styleName);
}
}
sheet.setColumnWidth(1, 126);
sheet.setValue(4, 6, 'Movie');
sheet.setStyle(4, 6, 'source');
sheet.setValue(5, 6, 'Position');
sheet.setStyle(5, 6, 'result');
sheet.setValue(4, 7, 'Toy Story');
sheet.setFormula(5, 7, formula);
}
initSheet3(sheet) {
sheet.name('basic approximate match');
var intro = '#2 - basic approximate match';
var formula = '=XMATCH(H5,E6:E10,1)';
sheet.setValue(1, 1, intro);
sheet.setStyle(1, 1, 'intro');
sheet.setValue(2, 1, formula);
sheet.setStyle(2, 1, 'formula');
var data = [
["Movie", "Year", "Rank", "Sales"],
["Fargo", 1996, 5, 61],
["L.A. Confidential", 1997, 4, 126],
["The Sixth Sense", 1999, 1, 673],
["Toy Story", 1995, 2, 362],
["Unforgiven", 1992, 3, 159]
];
sheet.setArray(4, 1, data);
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < data[i].length; j++) {
var styleName;
if (i === 0) {
styleName = 'tableHeader';
} else {
styleName = 'tableContent';
}
sheet.setStyle(4 + i, 1 + j, styleName);
}
}
sheet.setColumnWidth(1, 126);
sheet.setValue(4, 6, 'Sales');
sheet.setStyle(4, 6, 'source');
sheet.setValue(5, 6, 'Position');
sheet.setStyle(5, 6, 'result');
sheet.setValue(4, 7, 400);
sheet.setFormula(5, 7, formula);
}
initSheet4(sheet) {
sheet.name('multiple values');
var intro = '#3 - multiple values';
var formula = '=XMATCH({5,4,1},D6:D10)';
sheet.setValue(1, 1, intro);
sheet.setStyle(1, 1, 'intro');
sheet.setValue(2, 1, formula);
sheet.setStyle(2, 1, 'formula');
var data = [
["Movie", "Year", "Rank", "Sales"],
["Fargo", 1996, 5, 61],
["L.A. Confidential", 1997, 4, 126],
["The Sixth Sense", 1999, 1, 673],
["Toy Story", 1995, 2, 362],
["Unforgiven", 1992, 3, 159]
];
sheet.setArray(4, 1, data);
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < data[i].length; j++) {
var styleName;
if (i === 0) {
styleName = 'tableHeader';
} else {
styleName = 'tableContent';
}
sheet.setStyle(4 + i, 1 + j, styleName);
}
}
sheet.setColumnWidth(1, 126);
sheet.setValue(4, 6, 'Rank');
sheet.setStyle(4, 6, 'source');
sheet.setValue(5, 6, 'Position');
sheet.setStyle(5, 6, 'result');
sheet.setValue(4, 7, '{5,4,1}');
sheet.setFormula(5, 7, formula);
}
}
<!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$/ja/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/spread/source/data/data.js" type="text/javascript"></script>
<!-- SystemJS -->
<script src="$DEMOROOT$/ja/react/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('$DEMOROOT$/ja/lib/react/license.js').then(function () {
System.import('./src/app');
});
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
input {
padding: 4px 6px;
}
.options-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
label {
display: block;
margin-bottom: 6px;
}
input[type=button] {
margin-top: 6px;
display: block;
width:216px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#app {
height: 100%;
}
(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-react': 'npm:@mescius/spread-sheets-react/index.js',
'@mescius/spread-sheets-resources-ja': 'npm:@mescius/spread-sheets-resources-ja/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);
