@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
69 lines • 2.39 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["data", "columns"];
import React from 'react';
import { v4 } from 'uuid';
import { useTable } from 'react-table';
import { Container, Grid, Table, TableBody, TableCell, TableContainer, TableRow, useMediaQuery, useTheme } from '@mui/material';
import { jsx as _jsx } from "react/jsx-runtime";
var BillingOutput = function BillingOutput(_ref) {
var data = _ref.data,
columns = _ref.columns,
props = _objectWithoutProperties(_ref, _excluded);
var _useTable = useTable({
columns: columns,
data: data
}),
getTableProps = _useTable.getTableProps,
getTableBodyProps = _useTable.getTableBodyProps,
prepareRow = _useTable.prepareRow,
rows = _useTable.rows;
var theme = useTheme();
var mqMedium = useMediaQuery(theme.breakpoints.down('md'));
return /*#__PURE__*/_jsx("div", {
children: mqMedium ? /*#__PURE__*/_jsx(Container, {
maxWidth: "md",
sx: {
mt: '30px'
},
children: /*#__PURE__*/_jsx(Grid, {
container: true,
direction: "column",
rowGap: "10px",
children: data.map(function (element) {
return props.responsiveChildren(element);
})
})
}) : /*#__PURE__*/_jsx(TableContainer, {
sx: {
maxWidth: theme.breakpoints.values.md,
mx: 'auto',
my: 2
},
children: /*#__PURE__*/_jsx(Table, _extends({}, getTableProps(), {
children: /*#__PURE__*/_jsx(TableBody, _extends({}, getTableBodyProps(), {
children: rows.map(function (row) {
prepareRow(row);
return /*#__PURE__*/_jsx(TableRow, {
children: row.cells.map(function (cell) {
return /*#__PURE__*/_jsx(TableCell, {
sx: {
border: 'none'
},
children: /*#__PURE__*/_jsx(Grid, {
container: true,
alignItems: "center",
justifyContent: "center",
height: "100%",
children: cell.render('Cell')
})
}, v4());
})
}, v4());
})
}))
}))
})
});
};
export default BillingOutput;