react-vite-themes
Version:
A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.
36 lines (35 loc) • 2.42 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
export const Table = ({ columns, data, variant = 'neutral', size = 'md', isStriped = false, isHoverable = true, isBordered = false, isClickable = false, onRowClick, className = '', ...props }) => {
const tableClasses = [
'table',
`table--${variant}`,
`table--${size}`,
isStriped && 'table--striped',
isHoverable && 'table--hoverable',
isBordered && 'table--bordered',
isClickable && 'table--clickable',
className
].filter(Boolean).join(' ');
// Create CSS Grid template columns with automatic width adjustment
const gridTemplateColumns = columns.map(column => {
if (column.width) {
// If width is specified, use it directly
return column.width;
}
// Use minmax with max-content minimum and 1fr maximum for flexible columns
// This ensures content is never cut off while allowing expansion
return 'minmax(max-content, 1fr)';
}).join(' ');
return (_jsx("div", { className: "table-wrapper", children: _jsxs("div", { className: tableClasses, style: {
'--grid-template-columns': gridTemplateColumns
}, ...props, children: [_jsx("div", { className: "table__header", children: columns.map((column, index) => (_jsx("div", { className: "table__header-cell", style: {
justifyContent: column.justifyContent || 'flex-start',
alignItems: column.alignItems || 'center'
}, children: column.label }, column.key || index))) }), _jsx("div", { className: "table__body", children: data.map((row, rowIndex) => (_jsx("div", { className: "table__row", onClick: isClickable && onRowClick ? () => onRowClick(row, rowIndex) : undefined, style: {
cursor: isClickable ? 'pointer' : 'default'
}, children: columns.map((column, colIndex) => (_jsx("div", { className: "table__cell", style: {
justifyContent: column.justifyContent || 'flex-start',
alignItems: column.alignItems || 'center'
}, children: column.render ? column.render(row[column.key], row) : String(row[column.key] || '') }, column.key || colIndex))) }, row.id || rowIndex))) })] }) }));
};