@vlsergey/react-bootstrap-pagetable/lib/esm/sortable/SortableHeaderCell.js

Complex solution to work with pageable data, including sorting, filtering, actions, changing displayed columns, etc.

import { __assign } from "tslib";
/** @jsx jsx */
import { css, jsx } from '@emotion/react';
import React, { useCallback } from 'react';
import { useControlledContext } from '../controlled/ControlledContext';
import DefaultColumnHeaderCell from '../controlled/DefaultColumnHeaderCell';
function SortableHeaderCell(_a) {
    var field = _a.field;
    var _b = useControlledContext(), fetchArgs = _b.fetchArgs, onFetchArgsChange = _b.onFetchArgsChange;
    var handleClick = useCallback(function () {
        var oldDirection = ((fetchArgs.sort || [])
            .find(function (sortBy) { return sortBy.field === field.key; }) || { direction: undefined })
            .direction;
        var newDirection = oldDirection === 'ASC' ? 'DESC' : 'ASC';
        onFetchArgsChange(__assign(__assign({}, fetchArgs), { sort: [{ field: field.key, direction: newDirection }] }));
    }, [fetchArgs, field.key, onFetchArgsChange]);
    if (!field.sortable) {
        return jsx(DefaultColumnHeaderCell, { field: field });
    }
    var fieldSort = (fetchArgs.sort || [])
        .find(function (sortBy) { return sortBy.field === field.key; });
    var iconClassName = 'fas fa-sort';
    if (fieldSort !== undefined) {
        iconClassName = fieldSort.direction === 'DESC'
            ? 'fas fa-sort-up'
            : 'fas fa-sort-down';
    }
    var headerCellContent = field.headerCellContent;
    return jsx("th", __assign({}, field.headerCellProps, { css: css("\n      cursor : pointer;\n      &:hover .fas {\n        color: unset;\n      }\n    "), onClick: handleClick }),
        jsx("div", { css: css("\n        display: flex;\n        justify-content: space-between;\n      ") },
            jsx("div", null, headerCellContent
                ? React.createElement(headerCellContent, { field: field })
                : field.title),
            jsx("i", { className: iconClassName, css: css("\n        color: lightgray;\n        line-height: unset;\n        margin-left: 0.25em;\n      ") })));
}
export default React.memo(SortableHeaderCell);