Wijmo を docusaurus 内で使用

やること

ためしに FlexGrid を表示してみる

• 表の内容は、

サンプル表示

コード

index.md

import React from 'react';
import '@grapecity/wijmo.styles/wijmo.css';
import * as wjGrid from '@grapecity/wijmo.react.grid';
import * as wjGridFilter from '@grapecity/wijmo.react.grid.filter';


<wjGrid.FlexGrid
  itemsSource={[
    {
        title: '1行コメント',
        ruby: '# ...',
        python: '# ...',
        bash: '# ...'
    },
    {
        title: '複数行コメント',
        ruby: '=begin\nxxxxxxxx\nxxxxxxxx\n=end',
        python: '',
        bash: ''
    },
    {
        title: 'ネスト可能か',
        ruby: 'o',
        python: 'x',
        bash: ''
    }
  ]}
  autoGenerateColumns={false}
  wordWrap={true}
  autoRowHeights={true}
  frozenColumns={1}
  alternatingRowStep={0}
  initialized={(grid) => {
    grid.formatItem.addHandler((s, e) => {
      if (e.panel === s.cells) {
        const row = s.rows[e.row];
        const col = s.columns[e.col];
        const item = row.dataItem;
        const binding = col.binding;

        if (binding == 'title') {
            e.cell.classList.add('cell-title-col')
        }

        if (item && binding && typeof item[binding] === 'string') {
          const value = item[binding];

          e.cell.innerHTML = value.replace(/\n/g, '<br/>');

          if (value === 'o') {
            e.cell.classList.add('cell-ok');
          } else if (value === 'x') {
            e.cell.classList.add('cell-ng');
          } else if (value === '' || value == '-') {
            e.cell.classList.add('cell-disabled');
          }
        }
      }
    });
  }}
>
  <wjGrid.FlexGridColumn binding="title" header="機能" width="*" minWidth={150} />
  <wjGrid.FlexGridColumn binding="ruby" header="Ruby" width="*" minWidth={150}  />
  <wjGrid.FlexGridColumn binding="python" header="Python" width="*" minWidth={150}  />
  <wjGrid.FlexGridColumn binding="bash" header="Bash" width="*" minWidth={150}  />
  <wjGridFilter.FlexGridFilter />
</wjGrid.FlexGrid>

css

custom.css

.cell-ok {
	text-align: center;
	background-color: #e6f4ea !important;
	color: #10793f;
	font-weight: bold;
}
.cell-ng {
	text-align: center !important;
	background-color: #fdecea !important;
	color: #b71c1c !important;
}
.cell-disabled {
	text-align: center !important;
	background-color: #f2f2f2 !important;
	color: #9e9e9e !important;
}
.cell-title-col {
	background-color: #f8f8f8  !important;
}
.wj-header {
	text-align: center !important;
}
.wj-row-header {
	display: none !important;
  }