@navikt/ds-react/esm/table/Table.js

React components from the Norwegian Labour and Welfare Administration.

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { forwardRef } from "react";
import { useRenameCSS } from "../theme/Theme.js";
import Body from "./Body.js";
import ColumnHeader from "./ColumnHeader.js";
import DataCell from "./DataCell.js";
import ExpandableRow from "./ExpandableRow.js";
import Header from "./Header.js";
import HeaderCell from "./HeaderCell.js";
import Row from "./Row.js";
import { TableContext } from "./context.js";
/**
 * A component that displays a table with headers and rows.
 *
 * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/table)
 * @see 🏷️ {@link TableProps}
 *
 * @example
 * ```jsx
 * <Table>
 *   <Table.Header>
 *     <Table.Row>
 *       <Table.HeaderCell scope="col">Navn</Table.HeaderCell>
 *       <Table.HeaderCell scope="col">Fødselsnr.</Table.HeaderCell>
 *       <Table.HeaderCell scope="col">Start</Table.HeaderCell>
 *     </Table.Row>
 *   </Table.Header>
 *   <Table.Body>
 *     {data.map(({ name, fnr, start }, i) => {
 *       return (
 *         <Table.Row key={i + fnr}>
 *           <Table.HeaderCell scope="row">{name}</Table.HeaderCell>
 *           <Table.DataCell>{fnr}</Table.DataCell>
 *           <Table.DataCell>
 *             {format(new Date(start), "dd.MM.yyyy")}
 *           </Table.DataCell>
 *         </Table.Row>
 *       );
 *     })}
 *   </Table.Body>
 * </Table>
 * ```
 */
export const Table = forwardRef((_a, ref) => {
    var { className, zebraStripes = false, size = "medium", onSortChange, sort, stickyHeader = false } = _a, rest = __rest(_a, ["className", "zebraStripes", "size", "onSortChange", "sort", "stickyHeader"]);
    const { cn } = useRenameCSS();
    return (React.createElement(TableContext.Provider, { value: { onSortChange, sort } },
        React.createElement("table", Object.assign({}, rest, { ref: ref, className: cn("navds-table", `navds-table--${size}`, className, {
                "navds-table--zebra-stripes": zebraStripes,
                "navds-table--sticky-header": stickyHeader,
            }) }))));
});
Table.Header = Header;
Table.Body = Body;
Table.Row = Row;
Table.ColumnHeader = ColumnHeader;
Table.HeaderCell = HeaderCell;
Table.DataCell = DataCell;
Table.ExpandableRow = ExpandableRow;
export default Table;
//# sourceMappingURL=Table.js.map