@actinc/dls
Version:
Design Language System (DLS) for ACT & Encoura front-end projects.
56 lines • 4.03 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* Copyright (c) ACT, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import { Table, TableBody, TableHead, TableRow } from '@mui/material';
import constant from 'lodash/constant';
import isNumber from 'lodash/isNumber';
import round from 'lodash/round';
import { EmptyState } from "../EmptyState";
import TablePaginationActions from "../TablePaginationActions";
import { StyledEmptyStateContainer, StyledTablePagination } from './styles';
import TableCellBody from './TableCellBody';
import TableCellHead from './TableCellHead';
import TableContainer from './TableContainer';
export var DataTable = function (_a) {
var _b = _a.color, color = _b === void 0 ? 'default' : _b, columns = _a.columns, currentSortObject = _a.currentSortObject, emptyStateProps = _a.emptyStateProps, items = _a.items, limit = _a.limit, offset = _a.offset, onChangeLimit = _a.onChangeLimit, onChangeOffset = _a.onChangeOffset, onChangeSort = _a.onChangeSort, rowsPerPageOptions = _a.rowsPerPageOptions, RowWrapper = _a.RowWrapper, totalCount = _a.totalCount;
return (_jsxs(TableContainer, { children: [_jsxs(Table, { children: [_jsx(TableHead, { children: _jsx(TableRow, { children: columns.map(function (column, i) { return (_jsx(TableCellHead, { color: color, currentSortObject: currentSortObject, onChangeSort: onChangeSort, sortBy: column.sortBy, style: column.style, children: column.label || '' }, column.label || i)); }) }) }), _jsxs(TableBody, { children: [items.map(function (item, i) {
/* eslint-disable react/no-array-index-key */
var children = (_jsx(TableRow, { hover: true, children: columns.map(function (column, y) { return (_jsx(TableCellBody, { style: column.style, children: column.renderValue(item) }, column.label || y)); }) }, i));
/* eslint-enable react/no-array-index-key */
if (RowWrapper) {
return RowWrapper(item, children);
}
return children;
}), items.length > 0 &&
isNumber(limit) &&
isNumber(offset) &&
isNumber(totalCount) && (_jsx(StyledTablePagination, { ActionsComponent: TablePaginationActions, count: totalCount, labelDisplayedRows: constant(''), labelRowsPerPage: "Rows Per Page:", onPageChange: function (_, zeroBasedPage) {
if (onChangeOffset) {
onChangeOffset(zeroBasedPage * limit);
}
}, onRowsPerPageChange: function (e) {
if (onChangeLimit) {
onChangeLimit(Number(e.target.value));
}
if (onChangeOffset) {
onChangeOffset(0);
}
}, page: round(offset / limit, 0), rowsPerPage: limit, rowsPerPageOptions: rowsPerPageOptions || [25, 50, 100] }))] })] }), items.length === 0 && emptyStateProps && (_jsx(StyledEmptyStateContainer, { children: _jsx(EmptyState, __assign({ description: "No Results Found" }, emptyStateProps)) }))] }));
};
export default DataTable;
//# sourceMappingURL=index.js.map