tharikida-ui
Version:
A modern, lightweight React UI component library with built-in theming, accessibility, and full TypeScript support. Create beautiful, responsive, and customizable web apps faster with ready-to-use components for any project.
93 lines (92 loc) • 5.83 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useTheme } from "../../theme/ThemeProvider";
const Table = ({ columns, data, styles, className = "", cornerRadius, primaryColor, secondaryColor, textColor, backgroundColor, fontSize, fontFamily, spacingfactor, borderColor, shadowColor, borderWidth, borderStyle, fontWeight, lineHeight, letterSpacing, transitionDuration, padding, margin, shadowOffsetX, shadowOffsetY, shadowBlur, shadowSpread, shadowInset, hoverColor, }) => {
const theme = useTheme();
// Use prop override, then theme, then fallback to default
const getThemeValue = (prop, themeKey) => prop !== undefined ? prop : theme[themeKey];
const resolvedCornerRadius = getThemeValue(cornerRadius, "cornerRadius");
const resolvedPrimaryColor = getThemeValue(primaryColor, "primaryColor");
const resolvedSecondaryColor = getThemeValue(secondaryColor, "secondaryColor");
const resolvedTextColor = getThemeValue(textColor, "textColor");
const resolvedBackgroundColor = getThemeValue(backgroundColor, "backgroundColor");
const resolvedFontSize = getThemeValue(fontSize, "fontSize");
const resolvedFontFamily = getThemeValue(fontFamily, "fontFamily");
const resolvedSpacingfactor = getThemeValue(spacingfactor, "spacingfactor");
const resolvedBorderColor = getThemeValue(borderColor, "borderColor");
const resolvedShadowColor = getThemeValue(shadowColor, "shadowColor");
const resolvedBorderWidth = getThemeValue(borderWidth, "borderWidth");
const resolvedBorderStyle = getThemeValue(borderStyle, "borderStyle");
const resolvedFontWeight = getThemeValue(fontWeight, "fontWeight");
const resolvedLineHeight = getThemeValue(lineHeight, "lineHeight");
const resolvedLetterSpacing = getThemeValue(letterSpacing, "letterSpacing");
const resolvedTransitionDuration = getThemeValue(transitionDuration, "transitionDuration");
const resolvedPadding = getThemeValue(padding, "padding");
const resolvedMargin = getThemeValue(margin, "margin");
// Only apply shadow offset if explicitly provided as prop
const resolvedShadowOffsetX = shadowOffsetX !== undefined ? shadowOffsetX : undefined;
const resolvedShadowOffsetY = shadowOffsetY !== undefined ? shadowOffsetY : undefined;
const resolvedShadowBlur = getThemeValue(shadowBlur, "shadowBlur");
const resolvedShadowSpread = getThemeValue(shadowSpread, "shadowSpread");
const resolvedShadowInset = getThemeValue(shadowInset, "shadowInset");
const resolvedHoverColor = getThemeValue(hoverColor, "hoverColor");
const wrapperStyle = {
border: `${resolvedBorderWidth} ${resolvedBorderStyle} ${resolvedBorderColor}`,
borderRadius: resolvedCornerRadius,
overflow: "hidden",
margin: resolvedMargin,
boxShadow: [
resolvedShadowInset ? "inset" : null,
resolvedShadowOffsetX,
resolvedShadowOffsetY,
resolvedShadowBlur,
resolvedShadowSpread,
resolvedShadowColor,
]
.filter(Boolean)
.join(" ") || undefined,
transition: resolvedTransitionDuration,
width: "100%",
...styles,
};
return (_jsx("div", { style: wrapperStyle, className: className
? `tharikida-table-wrapper ${className}`
: "tharikida-table-wrapper", children: _jsxs("table", { style: {
width: "100%",
borderCollapse: "collapse",
background: resolvedBackgroundColor,
color: resolvedTextColor,
fontFamily: resolvedFontFamily,
fontSize: resolvedFontSize,
fontWeight: resolvedFontWeight,
lineHeight: resolvedLineHeight,
letterSpacing: resolvedLetterSpacing,
border: "none",
borderRadius: 0,
boxShadow: "none",
padding: resolvedPadding,
// margin, overflow, borderRadius, boxShadow, transition handled by wrapper
}, children: [_jsx("thead", { children: _jsx("tr", { children: columns.map((col, idx) => (_jsx("th", { style: {
border: `${resolvedBorderWidth} ${resolvedBorderStyle} ${resolvedBorderColor}`,
padding: resolvedPadding || resolvedSpacingfactor,
background: resolvedPrimaryColor,
color: resolvedTextColor,
fontWeight: 600,
fontFamily: resolvedFontFamily,
fontSize: resolvedFontSize,
lineHeight: resolvedLineHeight,
letterSpacing: resolvedLetterSpacing,
transition: resolvedTransitionDuration,
}, children: col }, col + idx))) }) }), _jsx("tbody", { children: data.map((row, rIdx) => (_jsx("tr", { children: row.map((cell, cIdx) => (_jsx("td", { style: {
border: `${resolvedBorderWidth} ${resolvedBorderStyle} ${resolvedBorderColor}`,
padding: resolvedPadding || resolvedSpacingfactor,
textAlign: "center",
color: resolvedTextColor,
fontFamily: resolvedFontFamily,
fontSize: resolvedFontSize,
lineHeight: resolvedLineHeight,
letterSpacing: resolvedLetterSpacing,
transition: resolvedTransitionDuration,
}, children: cell }, cIdx))) }, rIdx))) })] }) }));
};
export default Table;