Licensed, advanced components for building production-ready applications
Explore ComponentsFeature-rich data grid with inline editing, sorting, filtering, and keyboard navigation.
Ready-to-use OAuth integration with popular providers and token management.
WYSIWYG text editor with formatting, images, and markdown support.
Render 10,000+ items efficiently with virtual scrolling. Only visible items are rendered.
Date range picker with quick selects, keyboard navigation, and form integration.
Multi-select dropdown with search, async loading, and pill-style selected items.
A powerful, feature-rich data grid inspired by svelte-tablecn/tablecn.com. Perfect for admin panels and data-heavy applications.
import { NounTable, CellVariant } from '@noundryfx/nounjs/components'
const table = new NounTable('#my-table', {
data: [
{ id: 1, name: 'John Doe', email: 'john@example.com', age: 32, active: true },
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 28, active: true }
],
columns: [
{ key: 'name', label: 'Name' },
{ key: 'email', label: 'Email' },
{ key: 'age', label: 'Age', meta: { variant: CellVariant.NUMBER } },
{ key: 'active', label: 'Active', meta: { variant: CellVariant.CHECKBOX } },
{
key: 'status',
label: 'Status',
meta: {
variant: CellVariant.SELECT,
options: [
{ value: 'active', label: 'Active' },
{ value: 'inactive', label: 'Inactive' }
]
}
}
],
enableSearch: true,
enableFiltering: true,
enableSorting: true,
enableRowSelection: true,
showPagination: true
})
table.mount()
// Listen for changes
table.on('data-change', ({ data }) => {
// Save to backend
api.saveData(data)
})| Variant | Description | Options |
|---|---|---|
SHORT_TEXT | Single-line text input (default) | - |
LONG_TEXT | Multi-line expandable editor | - |
NUMBER | Numeric input | min, max, step |
DATE | Date picker | - |
SELECT | Single dropdown selection | options: [{value, label}] |
MULTI_SELECT | Multiple selection with tags | options: [{value, label}] |
CHECKBOX | Boolean toggle | - |
URL | Link with preview | - |
FILE | File attachments | - |
See the Components page for complete NounTable API reference including all props, events, and methods.
Ready-to-use OAuth components for authentication with popular providers.
import { OAuthButton, OAuthProvider, useAuth } from '@noundryfx/nounjs/auth'
// In your component
class LoginPage extends Component {
template = `
<div class="flex flex-col gap-4">
<oauth-button provider="google">Continue with Google</oauth-button>
<oauth-button provider="github">Continue with GitHub</oauth-button>
</div>
`
mounted() {
// Configure providers
OAuthProvider.configure({
google: { clientId: 'your-google-client-id' },
github: { clientId: 'your-github-client-id' }
})
}
}
// Use the auth hook
const auth = useAuth()
auth.on('login', (user) => {
console.log('Logged in:', user)
router.navigate('/dashboard')
})Get started with Nounjs and access all Pro components with your license.