@mankindui/core/dist/components/Table/index.js

- a react component library - you can see how @mankindui/core can be used via examples: [usage examples](https://github.com/clarklindev/mankindui-test)

import { j as i } from "../../_virtual/jsx-runtime.js";
import d from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
const p = d.table`
    width: 100%;
    overflow-x: auto;
    display: grid;

    tr {
        display: grid;
        grid-template-columns: ${({ gridTemplateColumns: l }) => l.replace(/fr/gi, "px")};
    }

    th,
    td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; /* Prevent text from wrapping by default */
    }

    @media (min-width: 1024px) {
        tr {
            grid-template-columns: ${({ gridTemplateColumns: l }) => l};
        }
    }
`, m = ({ headers: l, data: o, configure: e }) => {
  const n = l.map((t) => t.width).join(" ");
  return console.log("columns: ", n), /* @__PURE__ */ i.jsxs(p, { className: "border border-gray-400/50", gridTemplateColumns: n, children: [
    /* @__PURE__ */ i.jsx("thead", { children: /* @__PURE__ */ i.jsx("tr", { children: l.map((t, a) => /* @__PURE__ */ i.jsx("th", { className: e.padding, style: { verticalAlign: "top" }, align: t.alignHeader, title: t.title, children: t.title }, a)) }) }),
    /* @__PURE__ */ i.jsx("tbody", { children: o.map((t, a) => /* @__PURE__ */ i.jsx("tr", { children: l.map((r, s) => /* @__PURE__ */ i.jsx("td", { className: [e.padding, e.align].join(" "), align: r.alignContent, title: t[r.mapToDataAttribute], children: t[r.mapToDataAttribute] }, s)) }, a)) })
  ] });
};
m.displayName = "Table";
export {
  m as Table
};
//# sourceMappingURL=index.js.map