@navinc/base-react-components/dist/table.js

Nav's Pattern Library

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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
// @ts-expect-error -- mui doesn't support ESM
import muiTablePkg from '@mui/material/node/Table/index.js';
// @ts-expect-error -- mui doesn't support ESM
import muiTableBodyPkg from '@mui/material/node/TableBody/index.js';
// @ts-expect-error -- mui doesn't support ESM
import muiTableCellPkg, { tableCellClasses } from '@mui/material/node/TableCell/index.js';
// @ts-expect-error -- mui doesn't support ESM
import muiTableContainerPkg from '@mui/material/node/TableContainer/index.js';
// @ts-expect-error -- mui doesn't support ESM
import muiTableHeadPkg from '@mui/material/node/TableHead/index.js';
// @ts-expect-error -- mui doesn't support ESM
import muiTableRowPkg from '@mui/material/node/TableRow/index.js';
import { styled, useTheme } from 'styled-components';
import { interopDefault, objectKeys } from '@navinc/utils';
const MuiTable = interopDefault(muiTablePkg);
const MuiTableBody = interopDefault(muiTableBodyPkg);
const MuiTableCell = interopDefault(muiTableCellPkg);
const MuiTableContainer = interopDefault(muiTableContainerPkg);
const MuiTableHead = interopDefault(muiTableHeadPkg);
const MuiTableRow = interopDefault(muiTableRowPkg);
const Background = styled.div.withConfig({ displayName: "brc-sc-Background", componentId: "brc-sc-1tdvq1g" }) `
  border-radius: 16px;
  background-color: ${({ theme }) => theme.navSecondary100};
  overflow: hidden;
`;
const UnstyledTable = (_a) => {
    var { name, headers, rows, stickyHeader = false, maxHeight } = _a, rest = __rest(_a, ["name", "headers", "rows", "stickyHeader", "maxHeight"]);
    const theme = useTheme();
    const rowCount = rows === null || rows === void 0 ? void 0 : rows.length;
    const alignmentMap = useMemo(() => {
        const map = {};
        headers.map((header) => (map[header.field] = header.align || 'left'));
        return map;
    }, [headers]);
    if (!rows && !headers)
        return null;
    return (_jsx(Background, { "data-testid": `table:${name}`, children: _jsx(MuiTableContainer, Object.assign({ sx: {
                fontFamily: theme.fontPrimary,
                maxHeight,
            } }, rest, { children: _jsxs(MuiTable, { "aria-label": name, stickyHeader: stickyHeader, children: [_jsx(MuiTableHead, { children: _jsx(MuiTableRow, { "data-testid": "table:header", children: headers === null || headers === void 0 ? void 0 : headers.map(({ label, align, field }) => (_jsx(MuiTableCell, { align: align, "data-testid": `table:header-cell:${field}`, sx: {
                                    fontFamily: theme.fontPrimary,
                                    padding: '15px 24px',
                                    background: 'white',
                                    [`&.${tableCellClasses.stickyHeader}`]: {
                                        borderBottom: `1px solid ${theme.neutral400}`,
                                    },
                                }, children: label }, field))) }) }), _jsx(MuiTableBody, { "data-testid": "table:body", children: rows === null || rows === void 0 ? void 0 : rows.map((row, rowIndex) => {
                            const rowLength = objectKeys(row).length;
                            const rowNumber = rowIndex + 1;
                            return (_jsx(MuiTableRow, { "data-testid": `table:row:${rowNumber}`, children: [...Array(rowLength)].map((_, columnIndex) => {
                                    const columnName = objectKeys(row)[columnIndex];
                                    const cellValue = row[columnName];
                                    if (!alignmentMap[columnName])
                                        return null;
                                    return (_jsx(MuiTableCell, { align: alignmentMap[columnName], sx: {
                                            fontFamily: theme.fontPrimary,
                                            padding: '20px 24px',
                                            borderBottom: rowCount === rowNumber ? 'none' : '',
                                            background: 'white',
                                        }, "data-testid": `table:row-cell:${columnName} table:row-${rowNumber}:column-${columnIndex + 1}`, children: cellValue }, `${rowNumber}-${columnIndex}`));
                                }) }, rowIndex));
                        }) })] }) })) }));
};
/**
Table component based on MUI Table. Only meant for displaying data, not interacting with it.

```
type HeaderType = {
  label: string
  field: string
  align?: 'right' | 'center' | 'left'
  width?: string
}

type RowType = Record<string, any>
```

 */
export const Table = styled(UnstyledTable).withConfig({ displayName: "brc-sc-Table", componentId: "brc-sc-12a8av0" }) ``;
//# sourceMappingURL=table.js.map