60 lines
1.8 KiB
JavaScript
60 lines
1.8 KiB
JavaScript
export function ManagementTable({ columns, rows, getRowId, isMobile = false }) {
|
|
return (
|
|
<div style={{ display: 'grid', gap: '0.75rem' }}>
|
|
{!isMobile ? (
|
|
<div
|
|
style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: `repeat(${columns.length}, minmax(0, 1fr))`,
|
|
gap: '1rem',
|
|
padding: '0 1rem',
|
|
color: 'var(--color-text-soft)',
|
|
fontWeight: 700,
|
|
fontSize: '0.88rem',
|
|
}}
|
|
>
|
|
{columns.map((column) => (
|
|
<span key={column.key}>{column.label}</span>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
|
|
{rows.map((row) => (
|
|
<article
|
|
key={getRowId(row)}
|
|
style={{
|
|
borderRadius: '20px',
|
|
border: '1px solid var(--color-border)',
|
|
padding: '1rem',
|
|
display: 'grid',
|
|
gridTemplateColumns: isMobile ? '1fr' : `repeat(${columns.length}, minmax(0, 1fr))`,
|
|
gap: isMobile ? '0.65rem' : '1rem',
|
|
alignItems: 'center',
|
|
background: '#fff',
|
|
minWidth: 0,
|
|
}}
|
|
>
|
|
{columns.map((column) => (
|
|
<div key={column.key} style={{ minWidth: 0 }}>
|
|
{isMobile ? (
|
|
<span
|
|
style={{
|
|
display: 'block',
|
|
color: 'var(--color-text-soft)',
|
|
fontSize: '0.82rem',
|
|
fontWeight: 700,
|
|
marginBottom: '0.2rem',
|
|
}}
|
|
>
|
|
{column.label}
|
|
</span>
|
|
) : null}
|
|
{column.render ? column.render(row) : <span>{row[column.key]}</span>}
|
|
</div>
|
|
))}
|
|
</article>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|