UnrealEmo Solid Component

A collection of elegant, reusable SolidJS components.

Looking for React/Next.js? Check out unrealemo-react-component

Installation

npm install unrealemo-solid-component
# or
bun add unrealemo-solid-component
# or
pnpm add unrealemo-solid-component

Components

FilterableTable

A powerful data table with advanced filtering, sorting, column resizing, and CSV export.

import { FilterableTable, ColumnDefinition } from "unrealemo-solid-component";
import "unrealemo-solid-component/styles";

interface User {
  id: number;
  name: string;
  email: string;
  status: string;
}

const columns: ColumnDefinition<User>[] = [
  { key: "id", label: "ID", width: "80px", sortable: true },
  { key: "name", label: "Name", sortable: true },
  { key: "email", label: "Email", sortable: true },
  {
    key: "status",
    label: "Status",
    render: (value) => <span class={`badge-${value}`}>{value}</span>,
  },
];

function App() {
  const [data] = createSignal<User[]>([...]);

  return (
    <FilterableTable
      data={data()}
      columns={columns}
      defaultSort={{ column: "name", direction: "asc" }}
      exportFileName="users"
    />
  );
}

Props

Prop	Type	Default	Description
data	T[]	required	Array of data to display
columns	ColumnDefinition<T>[]	required	Column definitions
loading	boolean	false	Show loading state
defaultSort	{ column: string; direction: 'asc' | 'desc' }	-	Default sort configuration
defaultVisibleColumns	string[]	all columns	Columns to show by default
rowClass	(row: T) => string	-	Function to determine row CSS class
showExport	boolean	true	Show export button
showColumnSelector	boolean	true	Show column visibility selector
allowResize	boolean	true	Allow column resizing
exportFileName	string	"export"	Base name for exported file
onFilteredDataChange	(data: T[]) => void	-	Callback when filtered data changes

Button

A customizable button component.

import { Button } from "unrealemo-solid-component";

<Button color="primary" variant="solid" size="md">
  Click me
</Button>

<Button color="danger" variant="outline" size="sm">
  Delete
</Button>

Props

Prop	Type	Default	Description
color	'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'	'primary'	Button color
variant	'solid' | 'outline' | 'ghost'	'solid'	Button style variant
size	'sm' | 'md' | 'lg'	'md'	Button size
disabled	boolean	false	Disable the button
startIcon	JSXElement	-	Icon before text
endIcon	JSXElement	-	Icon after text

Card

A simple card container component.

import { Card } from "unrealemo-solid-component";

<Card class="my-card">
  Content goes here
</Card>

Features

• 🔍 Advanced Filtering - AND/OR logic, regex support, case-sensitive toggle
• 📊 Sortable Columns - Click headers to sort ascending/descending
• 📏 Resizable Columns - Drag column borders to adjust width
• 👁️ Column Visibility - Show/hide columns dynamically
• 📥 CSV Export - Export visible or all data with timestamps
• 🎨 Customizable - Custom renderers, row classes, and styling

License

MIT