@vlsergey/react-bootstrap-pagetable/lib/esm/controlled/DefaultHeaderFooter.js

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

/** @jsx jsx */
import { css, jsx } from '@emotion/react';
import React from 'react';
import { useControlledContext } from './ControlledContext';
import DivHideIfEmpty from './DivHideIfEmpty';
var DefaultHeaderFooter = function (_a) {
    var elements = _a.elements;
    return jsx(DivHideIfEmpty, { css: css("& > div {\n    align-items: center;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    margin-bottom: 1em;\n    margin-top: 1em;\n  }\n  & > div > div {\n    align-items: center;\n    display: flex;\n  }\n  & > div > div > div {\n    padding-left: .5em;\n    padding-right: .5em;\n  }\n  & > div:empty {\n    display: none;\n  }\n  & > div > div:empty {\n    display: none;\n  }\n  & > div > div > div:empty {\n    display: none;\n  }\n  & > div > div > div:first-of-type {\n    padding-left: 0;\n  }\n  & > div > div > div:last-of-type {\n    padding-right: 0;\n  }\n  ") }, elements.map(function (line, index1) { return jsx(DivHideIfEmpty, { key: index1 }, line.map(function (column, columnIndex) { return jsx(DivHideIfEmpty, { key: columnIndex }, column.map(function (child, index) {
        return jsx(DivHideIfEmpty, { key: index }, React.createElement(child));
    })); })); }));
};
export var DefaultHeader = function () {
    var headerElements = useControlledContext().headerElements;
    return jsx(DefaultHeaderFooter, { elements: headerElements });
};
export var DefaultFooter = function () {
    var footerElements = useControlledContext().footerElements;
    return jsx(DefaultHeaderFooter, { elements: footerElements });
};