2020-01-16 00:48:55 -05:00
|
|
|
/**
|
|
|
|
* Licensed to the Apache Software Foundation (ASF) under one
|
|
|
|
* or more contributor license agreements. See the NOTICE file
|
|
|
|
* distributed with this work for additional information
|
|
|
|
* regarding copyright ownership. The ASF licenses this file
|
|
|
|
* to you under the Apache License, Version 2.0 (the
|
|
|
|
* "License"); you may not use this file except in compliance
|
|
|
|
* with the License. You may obtain a copy of the License at
|
|
|
|
*
|
|
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
*
|
|
|
|
* Unless required by applicable law or agreed to in writing,
|
|
|
|
* software distributed under the License is distributed on an
|
|
|
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
|
|
* KIND, either express or implied. See the License for the
|
|
|
|
* specific language governing permissions and limitations
|
|
|
|
* under the License.
|
|
|
|
*/
|
|
|
|
import React from 'react';
|
2020-02-20 12:54:33 -05:00
|
|
|
import cx from 'classnames';
|
2020-02-27 12:30:52 -05:00
|
|
|
import { TableInstance } from 'react-table';
|
2020-01-16 00:48:55 -05:00
|
|
|
|
2020-02-27 12:30:52 -05:00
|
|
|
interface Props {
|
2020-01-16 00:48:55 -05:00
|
|
|
getTableProps: (userProps?: any) => any;
|
|
|
|
getTableBodyProps: (userProps?: any) => any;
|
2020-02-27 12:30:52 -05:00
|
|
|
prepareRow: TableInstance['prepareRow'];
|
|
|
|
headerGroups: TableInstance['headerGroups'];
|
|
|
|
rows: TableInstance['rows'];
|
2020-01-16 00:48:55 -05:00
|
|
|
loading: boolean;
|
|
|
|
}
|
|
|
|
export default function TableCollection({
|
|
|
|
getTableProps,
|
|
|
|
getTableBodyProps,
|
|
|
|
prepareRow,
|
|
|
|
headerGroups,
|
|
|
|
rows,
|
|
|
|
loading,
|
2020-02-27 12:30:52 -05:00
|
|
|
}: Props) {
|
2020-01-16 00:48:55 -05:00
|
|
|
return (
|
2020-02-20 12:54:33 -05:00
|
|
|
<table {...getTableProps()} className="table table-hover">
|
2020-01-16 00:48:55 -05:00
|
|
|
<thead>
|
2020-02-20 12:54:33 -05:00
|
|
|
{headerGroups.map(headerGroup => (
|
2020-01-16 00:48:55 -05:00
|
|
|
<tr {...headerGroup.getHeaderGroupProps()}>
|
2020-02-27 12:30:52 -05:00
|
|
|
{headerGroup.headers.map(column =>
|
|
|
|
column.hidden ? null : (
|
|
|
|
<th
|
2020-03-13 15:35:00 -04:00
|
|
|
{...column.getHeaderProps(
|
|
|
|
column.sortable ? column.getSortByToggleProps() : {},
|
|
|
|
)}
|
2020-02-27 12:30:52 -05:00
|
|
|
data-test="sort-header"
|
|
|
|
>
|
|
|
|
{column.render('Header')}
|
|
|
|
{' '}
|
|
|
|
{column.sortable && (
|
|
|
|
<i
|
|
|
|
className={cx('text-primary fa', {
|
|
|
|
'fa-sort': !column.isSorted,
|
|
|
|
'fa-sort-down': column.isSorted && column.isSortedDesc,
|
|
|
|
'fa-sort-up': column.isSorted && !column.isSortedDesc,
|
|
|
|
})}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</th>
|
|
|
|
),
|
|
|
|
)}
|
2020-01-16 00:48:55 -05:00
|
|
|
</tr>
|
|
|
|
))}
|
|
|
|
</thead>
|
|
|
|
<tbody {...getTableBodyProps()}>
|
2020-02-20 12:54:33 -05:00
|
|
|
{rows.map(row => {
|
2020-01-16 00:48:55 -05:00
|
|
|
prepareRow(row);
|
|
|
|
const loadingProps = loading ? { className: 'table-row-loader' } : {};
|
|
|
|
return (
|
|
|
|
<tr
|
|
|
|
{...row.getRowProps()}
|
|
|
|
{...loadingProps}
|
|
|
|
onMouseEnter={() => row.setState && row.setState({ hover: true })}
|
2020-02-20 12:54:33 -05:00
|
|
|
onMouseLeave={() =>
|
|
|
|
row.setState && row.setState({ hover: false })
|
|
|
|
}
|
2020-01-16 00:48:55 -05:00
|
|
|
>
|
2020-02-27 12:30:52 -05:00
|
|
|
{row.cells.map(cell => {
|
|
|
|
if (cell.column.hidden) return null;
|
|
|
|
|
2020-01-16 00:48:55 -05:00
|
|
|
const columnCellProps = cell.column.cellProps || {};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<td {...cell.getCellProps()} {...columnCellProps}>
|
|
|
|
<span>{cell.render('Cell')}</span>
|
|
|
|
</td>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</tr>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
);
|
|
|
|
}
|