WijmoのFlexGridでページング時の新規データ挿入位置を制御する

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>FlexGridで新規アイテムの挿入位置を指定する</title>

    <!-- ローカルのライブラリを参照する場合 -->
    <link rel="stylesheet" href="css/wijmo.min.css" />
    <script src="scripts/wijmo.min.js"></script>
    <script src="scripts/wijmo.grid.min.js"></script>
    <script src="scripts/wijmo.input.min.js"></script>
    <script src="scripts/cultures/wijmo.culture.ja.min.js"></script>

    <!-- CDNからライブラリを参照する場合 -->
    <!-- <link rel="stylesheet" href="https://cdn.mescius.com/wijmo/5.20261.52/styles/wijmo.min.css" />
    <script src="https://cdn.mescius.com/wijmo/5.20261.52/controls/wijmo.min.js"></script>
    <script src="https://cdn.mescius.com/wijmo/5.20261.52/controls/wijmo.grid.min.js"></script>
    <script src="https://cdn.mescius.com/wijmo/5.20261.52/controls/wijmo.input.min.js"></script>
    <script src="https://cdn.mescius.com/wijmo/5.20261.52/controls/cultures/wijmo.culture.ja.min.js"></script> -->

    <link rel="stylesheet" href="css/styles.css">
    <script src="scripts/app.js"></script>
    <script src="scripts/data.js"></script>
</head>

<body>
    <div class="grid-container">
        <div id="thePager"></div>
        <div id="theGrid"></div>
    </div>
</body>

</html>

wijmo.setLicenseKey('ここにWijmoのライセンスキーを設定します');

document.readyState === 'complete' ? init() : window.onload = init;
function init() {

    // ページングの設定
    const collectionView = new wijmo.collections.CollectionView(data, {
        pageSize: 5,
    });

    const navigator = new wijmo.input.CollectionViewNavigator('#thePager', {
        byPage: true,
        headerFormat: '{currentPage:n0} / {pageCount:n0} ページ',
        cv: collectionView
    });

    // グリッドの生成
    const grid = new wijmo.grid.FlexGrid('#theGrid', {
        itemsSource: collectionView,
        autoGenerateColumns: false,
        alternatingRowStep: 0,
        imeEnabled: true,
        columns: [
            { binding: "category", header: '勘定科目', width: 100 },
            { binding: "name", header: '経費項目名', width: 190 },
            { binding: "code", header: 'コード', width: 100 },
        ]
    });

}

// データ
const data = [
  { category: "交通費", name: "電車代", code: "TRV-001" },
  { category: "交通費", name: "バス代", code: "TRV-002" },
  { category: "交通費", name: "タクシー代", code: "TRV-003" },
  { category: "交通費", name: "新幹線代", code: "TRV-004" },
  { category: "交通費", name: "航空券代", code: "TRV-005" },
  { category: "交通費", name: "レンタカー代", code: "TRV-006" },
  { category: "交通費", name: "高速道路料金", code: "TRV-007" },
  { category: "消耗品費", name: "日用品購入費", code: "SUP-001" },
  { category: "消耗品費", name: "事務用品購入費", code: "SUP-002" },
  { category: "消耗品費", name: "パソコン用品購入費", code: "SUP-003" },
  { category: "通信費", name: "電話料金", code: "COM-001" },
  { category: "通信費", name: "インターネット利用料", code: "COM-002" },
  { category: "通信費", name: "クラウドサービス利用料", code: "COM-003" },
  { category: "通信費", name: "宅配便送料", code: "COM-004" },
];

/* グリッドのスタイル */
#theGrid {
    border: 1px solid gray;
    inline-size: 432px;
}

/* ページナビゲータのスタイル */
#thePager {
    border: 1px solid gray;
    inline-size: 320px;
}

/* その他の要素のスタイル */
.grid-container {
  display: flex;
  flex-direction: column;
  margin: 20px;
  gap: 6px;
}

html {
    font-family: Meiryo;
}

・・・（中略）・・・
// グリッドの生成
const grid = new wijmo.grid.FlexGrid('#theGrid', {
    itemsSource: collectionView,
    autoGenerateColumns: false,
    alternatingRowStep: 0,
    imeEnabled: true,
    allowAddNew: true,//新規行テンプレートを使用する
    columns: [
        { binding: "category", header: '勘定科目', width: 100 },
        { binding: "name", header: '経費項目名', width: 190 },
        { binding: "code", header: 'コード', width: 100 },
    ]
});

・・・（中略）・・・
// ページングの設定
const collectionView = new wijmo.collections.CollectionView(data, {
    pageSize: 5,
    newItemIndex: 4,//ページ内の末尾に追加（pageSize-1）
});

・・・（中略）・・・

// グリッドの生成
const grid = new wijmo.grid.FlexGrid('#theGrid', {
    ・・・（中略）・・・
    keyActionEnter: wijmo.grid.KeyAction.None,//Enterキーで下の行に移動しないようにする
    allowAddNew: true,//新規行テンプレートを使用する
    ・・・（中略）・・・
});

・・・（中略）・・・
// ページングの設定
const collectionView = new wijmo.collections.CollectionView(data, {
    pageSize: 5,
    newItemIndex: 0,//ページ内の先頭に追加
});

・・・（中略）・・・

// グリッドの生成
const grid = new wijmo.grid.FlexGrid('#theGrid', {
    ・・・（中略）・・・
    keyActionEnter: wijmo.grid.KeyAction.None,//Enterキーで下の行に移動しないようにする
    allowAddNew: true,//新規行テンプレートを使用する
    newRowAtTop: true,//新規行テンプレートを先頭に表示
    ・・・（中略）・・・
});

・・・（中略）・・・
    
// コンテキストメニューの生成
const menu = new wijmo.input.Menu(document.createElement('div'), {
    displayMemberPath: 'header',
    selectedValuePath: 'cmd',
    itemsSource: [
        { header: '行を追加', cmd: 'addRow' }
    ],
    itemClicked: () => {
        if (menu.selectedValue == 'addRow') {
            //選択行の上にアイテムを追加する
            // const item = collectionView.insertAt(grid.selection.row);//先頭に新規行テンプレートが無い場合
            const item = collectionView.insertAt(grid.selection.row-1);//先頭に新規行テンプレートがある場合
            if (!item) return;
            collectionView.commitNew();
        }
    }
});

// グリッドのコンテキストメニューに設定
menu.owner = grid.hostElement;
grid.hostElement.addEventListener('contextmenu', (e) => {
    const ht = grid.hitTest(e.pageX, e.pageY);
    if (ht.cellType == wijmo.grid.CellType.Cell) {
        e.preventDefault();
        menu.show(e);
    }
}, true);

・・・（中略）・・・