diff --git a/src/components/Table/index.js b/src/components/Table/index.js
index 553a5520..e892834a 100644
--- a/src/components/Table/index.js
+++ b/src/components/Table/index.js
@@ -160,6 +160,7 @@ const Table = () => {
 {
 Header: 'Questions',
 accessor: 'questions',
+ disableSortBy: true,
 Cell: cellInfo => {
 return (
 <navlink @@ -189,6 +190,7 @@ const Table = () => {
 {
 Header: 'Solutions',
 accessor: 'solutions',
+ disableSortBy: true,
 Cell: cellInfo => {
 const url = cellInfo.row.original.premium
 ? `${cellInfo.row.original.url}/`
@@ -234,6 +236,7 @@ const Table = () => {
 );
 },
 accessor: 'pattern',
+ disableSortBy: true,
 Cell: cellInfo => {
 const patterns = `${cellInfo.row.original.pattern}`
 .split(',')
@@ -261,6 +264,7 @@ const Table = () => {
 {
 Header: 'Difficulty',
 accessor: 'difficulty',
+ disableSortBy: true,
 Cell: cellInfo => (
 <row>
 <badge @@ -276,15 +280,27 @@ const Table = () => {
 {
 Header: () => {
 return (
- <div style={{ whiteSpace: 'nowrap' }}>
- Companies{' '}
- <span data-tip="Companies retrieved from Leetcode Premium (May 2021)">
- <faquestioncircle />
- </span>
- </div>
+ <strong>
+ <div + style={{ whiteSpace: 'nowrap', display: 'inline-block' }} +>
+ Companies{' '}
+ <span data-tip="Companies retrieved from Leetcode Premium (May 2021)">
+ <faquestioncircle />
+ </span>
+ </div>
+ </strong>
 );
 },
 accessor: 'companies',
+ sortType: (a, b) => {
+ if (a.original.companies.length === b.original.companies.length) {
+ return 0;
+ }
+ return a.original.companies.length> b.original.companies.length
+ ? 1
+ : -1;
+ },
 Cell: cellInfo => {
 const companies = cellInfo.row.original.companies.map(company => {
 return (
@@ -333,7 +349,15 @@ const Table = () => {
 <div class="naked_tr"> {headerGroup.headers.map(column => (
 <th {...column.getHeaderProps()}>
- {column.render('Header')}
+ <div {...column.getSortByToggleProps({ title: null })}>
+ {column.render('Header')}
+ {/* eslint-disable-next-line no-nested-ternary */}
+ {column.isSorted
+ ? column.isSortedDesc
+ ? ' 🔽'
+ : ' 🔼'
+ : ''}
+ </div>
 <div>{column.canFilter ? column.render('Filter') : null}</div>
 </th>
 ))}
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://patch-diff.githubusercontent.com/raw/seanprashad/leetcode-patterns/pull/104.diff">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://patch-diff.githubusercontent.com/raw/seanprashad/leetcode-patterns/pull/104.diff" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>