1.0.3 • Published 1 month ago
woby-table v1.0.3
voby-table
Voby table
install
Development
npm install
npm startExample
https://github.com/wongchichong/woby-table
Usage
import { $, $$, render, useEffect, useMemo, type JSX, isObservable, ObservableMaybe, Observable } from "woby"
import { groupBy, orderBy, filter as ft, chain, sortBy, sumBy, isArray, omit, map } from "lodash-es"
import { Table, TableProps, useTable } from '../src/index'
import { tw } from 'woby-styled'
import { useClickAway, make } from 'use-woby'
import { Wheeler } from 'woby-wheeler'
import 'woby-wheeler/dist/output.css'
const ExpandMoreIcon = (props: JSX.SVGAttributes<SVGElement>) => <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" {...props}><path d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" /></svg>
const ExpandLessIcon = (props: JSX.SVGAttributes<SVGElement>) => <svg class="inline-block" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" {...props}><path d="m296-345-56-56 240-240 240 240-56 56-184-184-184 184Z" /></svg>
const SquareIcon = (props: JSX.SVGAttributes<SVGElement>) => <svg class="inline-block rotate-45 scale-50" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" {...props}><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Z" /></svg>
const FilterIcon = (props: JSX.SVGAttributes<SVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" {...props}><path d="M400-240v-80h160v80H400ZM240-440v-80h480v80H240ZM120-640v-80h720v80H120Z" /></svg>
const FilterOffIcon = (props: JSX.SVGAttributes<SVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" {...props}><path d="M791-55 55-791l57-57 736 736-57 57ZM633-440l-80-80h167v80h-87ZM433-640l-80-80h487v80H433Zm-33 400v-80h160v80H400ZM240-440v-80h166v80H240ZM120-640v-80h86v80h-86Z" /></svg>
const ViewColumnIcon = (props: JSX.SVGAttributes<SVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000" {...props}>
<rect fill="none" height="24" width="24" />
<path d="M3,5v14h18V5H3z M8.33,17H5V7h3.33V17z M13.67,17h-3.33V7h3.33V17z M19,17h-3.33V7H19V17z" />
</svg>
const db = [
{ id: 1, name: "Alice", age: 8, country: "Canada", add: "Canada" },
{ id: 2, name: "Bob", age: 12, country: "USA", add: "USA" },
{ id: 3, name: "Charlie", age: 25, country: "UK", add: "UK" },
{ id: 4, name: "David", age: 32, country: "Australia", add: "Australia" },
{ id: 5, name: "Eve", age: 19, country: "Canada", add: "Canada" },
{ id: 6, name: "Frank", age: 45, country: "USA", add: "USA" },
{ id: 7, name: "Grace", age: 7, country: "UK", add: "UK" },
{ id: 8, name: "Hank", age: 28, country: "Canada", add: "Canada" },
{ id: 9, name: "Ivy", age: 14, country: "USA", add: "USA" },
{ id: 10, name: "Jack", age: 33, country: "Australia", add: "Australia" },
{ id: 11, name: "Karen", age: 22, country: "Canada", add: "Canada" },
{ id: 12, name: "Liam", age: 17, country: "USA", add: "USA" },
{ id: 13, name: "Mia", age: 31, country: "UK", add: "UK" },
{ id: 14, name: "Noah", age: 5, country: "Australia", add: "Australia" },
{ id: 15, name: "Olivia", age: 28, country: "Canada", add: "Canada" },
{ id: 16, name: "Paul", age: 9, country: "USA", add: "USA" },
{ id: 17, name: "Quinn", age: 37, country: "UK", add: "UK" },
{ id: 18, name: "Ryan", age: 16, country: "Australia", add: "Australia" },
{ id: 19, name: "Sophia", age: 11, country: "Canada", add: "Canada" },
{ id: 20, name: "Thomas", age: 29, country: "USA", add: "USA" },
{ id: 21, name: "Uma", age: 6, country: "UK", add: "UK" },
{ id: 22, name: "Vincent", age: 42, country: "Australia", add: "Australia" },
{ id: 23, name: "Wendy", age: 15, country: "Canada", add: "Canada" },
{ id: 24, name: "Xander", age: 20, country: "USA", add: "USA" },
{ id: 25, name: "Yasmine", age: 24, country: "UK", add: "UK" },
{ id: 26, name: "Zane", age: 36, country: "Australia", add: "Australia" },
{ id: 27, name: "Ava", age: 13, country: "Canada", add: "Canada" },
{ id: 28, name: "Ben", age: 38, country: "USA", add: "USA" },
{ id: 29, name: "Chloe", age: 23, country: "UK", add: "UK" },
{ id: 30, name: "Daniel", age: 18, country: "Australia", add: "Australia" },
{ id: 31, name: "Emily", age: 7, country: "Canada", add: "Canada" },
{ id: 32, name: "Finn", age: 30, country: "USA", add: "USA" },
{ id: 33, name: "Georgia", age: 10, country: "UK", add: "UK" },
{ id: 34, name: "Henry", age: 27, country: "Australia", add: "Australia" },
{ id: 35, name: "Isabella", age: 14, country: "Canada", add: "Canada" },
{ id: 36, name: "Jacob", age: 28, country: "USA", add: "USA" },
{ id: 37, name: "Katherine", age: 26, country: "UK", add: "UK" },
{ id: 38, name: "Liam", age: 33, country: "Australia", add: "Australia" },
{ id: 39, name: "Mia", age: 6, country: "Canada", add: "Canada" },
{ id: 40, name: "Noah", age: 35, country: "USA", add: "USA" },
{ id: 41, name: "Olivia", age: 9, country: "UK", add: "UK" },
{ id: 42, name: "Peter", age: 17, country: "Australia", add: "Australia" },
{ id: 43, name: "Quinn", age: 12, country: "Canada", add: "Canada" },
{ id: 44, name: "Ryan", age: 19, country: "USA", add: "USA" },
{ id: 45, name: "Sophia", age: 8, country: "UK", add: "UK" },
{ id: 46, name: "Thomas", age: 22, country: "Australia", add: "Australia" },
{ id: 47, name: "Uma", age: 5, country: "Canada", add: "Canada" },
{ id: 48, name: "Vincent", age: 24, country: "USA", add: "USA" },
{ id: 49, name: "Wendy", age: 29, country: "UK", add: "UK" },
{ id: 50, name: "Xander", age: 16, country: "Australia", add: "Australia" }
]
const groupedData = chain(db)
.groupBy((item) => [item.country])
// .mapValues((countryData) =>
// sortBy(countryData, 'name')
// )
.value()
const nestedGroupData = chain(db)
.groupBy("country")
.mapValues((countryData) =>
chain(countryData).groupBy((item) => item.name.charAt(0))
.mapValues((countryData) =>
sortBy(countryData, 'name')
)
.value()
)
.value()
type SortDir = 'asc' | 'desc' | ''
type ToObservable<T, V> = Record<keyof T, ObservableMaybe<V>>
type SortDirRecord<T> = Record<keyof T, Observable<SortDir>>
type IData<T> = {
data: ObservableMaybe<T[]>,
sortable?: Partial<ToObservable<T, boolean>>
sortdir?: Partial<SortDirRecord<T>>
filterable?: Partial<ToObservable<T, boolean>>
showColumns?: Partial<ToObservable<T, boolean>>
filter?: ObservableMaybe<string>
showInput?: ObservableMaybe<boolean>
showColummn?: ObservableMaybe<boolean>
}
const useRecordWheeler = <T, V>(d: Record<keyof T, ObservableMaybe<V>>) => {
const keys = Object.keys(d) as (keyof T)[]
const data = [$(keys.map((key) => ({ text: key, value: key, checked: d[key] })))]
const checked = keys.map(key => d[key])
return {
data, checked, value: [$()],
renderer: [r => r.text],
valuer: [r => r.value],
checkboxer: [r => r.checked],
checkbox: [$(true)],
noMask: true,
hideOnBackdrop: true,
rows: Math.min(6, keys.length),
}
}
const useData = <T,>(props: IData<T>) => {
const sortable: ToObservable<T, boolean> = {} as ToObservable<T, boolean>
const sortdir: SortDirRecord<T> = {} as SortDirRecord<T>
const filterable: ToObservable<T, boolean> = {} as ToObservable<T, boolean>
const showColumns: ToObservable<T, boolean> = {} as ToObservable<T, boolean>
Object.keys(props.data[0]).forEach((key/* : keyof T */) => {
sortable[key] = isObservable(props.sortable?.[key]) ? props.sortable?.[key] : $(props.sortable?.[key] ?? true)
sortdir[key] = isObservable(props.sortdir?.[key]) ? props.sortdir?.[key] : $<SortDir>($$(props.sortdir?.[key]) ?? '')
filterable[key] = isObservable(props.filterable?.[key]) ? props.filterable?.[key] : $(props.filterable?.[key] ?? true)
showColumns[key] = isObservable(props.showColumns?.[key]) ? props.showColumns?.[key] : $(props.showColumns?.[key] ?? true)
})
const sortorder: string[] = []
const { data, filter, showInput, showColummn } = make(Object.assign({ filter: null, showInput: false, showColummn: false }, props))
const sortClick = (col: string) => {
const sd = sortdir[col]
if ($$(sortable[col]))
if ($$(sd) === '') {
sd('asc')
if (sortorder.indexOf(col) == -1)
sortorder.push(col)
}
else if ($$(sd) === 'asc') {
sd('desc')
if (sortorder.indexOf(col) == -1)
sortorder.push(col)
}
else if ($$(sd) === 'desc') {
sd('')
const pos = sortorder.indexOf(col)
sortorder.splice(pos, 1)
}
const keyValueArray = Object.entries(sortdir).map(([key, value]) => ({ key, value }))
const sorts = keyValueArray.filter(k => $$(k.value) !== '')
let fb = ft(db, d => !$$(filter) ? true : Object.keys(d).filter(k => $$(filterable[k])).some(k => d[k]?.toString().toLocaleLowerCase().indexOf($$(filter).toLocaleLowerCase()) >= 0))
const hides = Object.keys(showColumns).filter(k => !$$(showColumns[k])).map(k => k)
if (hides.length)
fb = fb.map(r => omit(r, hides))
if (sorts.length > 0)
data(orderBy(fb, sortorder, sortorder.filter(r => hides.indexOf(r) >= 0).map(k => $$(sortdir[k])) as any) as any)
else
data(fb as any)
}
useEffect(() => {
$$(filter)
sortClick("")
})
return { data, filter, sortable, sortdir, filterable, showInput, showColummn, sortClick, showColumns, }
}
const MainTab = () => {
const inputRef = $<HTMLInputElement>()
const inputCont = $<HTMLInputElement>()
const { filter, showInput, data, sortable, sortdir, filterable, showColummn, sortClick, showColumns } =
useData({ data: db, sortable: { name: true, age: true, country: true }, filterable: { id: false, add: false } })
useClickAway(inputCont, () => showInput(false))
useEffect(() => $$(showInput) && $$(inputRef) && $$(inputRef).focus())
const fi = <FilterIcon class='cursor-pointer inline-block' onClick={() => { showInput(true); $$(filter) }} />
return <>
<ViewColumnIcon class='cursor-pointer inline-block' onClick={() => { showColummn(true) }} />
{() => $$(filter) && $$(filter).length > 0 ? <>{fi}<FilterOffIcon class='cursor-pointer inline-block' onClick={() => { showInput(false); filter(null) }} /></> : fi}
{
() => $$(showInput) ? <div ref={inputCont} class='inline-block'>
<input ref={inputRef} class='border' value={filter} onKeyup={e => { filter(e.target.value); console.log(e.target.value) }} onKeydown={e => { e.keyCode === 13 && (showInput(false), filter($$(changing))) }} />
<span class='bg-[#f8e3fa] border cursor-pointer' onClick={() => { showInput(false); filter(null) }}>✖</span>
<span class='bg-[#f7fae3] border cursor-pointer' onClick={() => { showInput(false) }}>✔</span></div> : null
}
<Wheeler {...useRecordWheeler(showColumns)} open={showColummn} toolbar />
<Table data={data} class='w-1/2'
Th={({ col }) => $$(showColumns[col]) ? <th onClick={() => sortClick(col)}
class={['text-[blue] border-[1px] border-solid border-[lightgray] uppercase',
() => $$(sortable[col]) ? 'cursor-pointer' : '',
// '[&>div]:hidden [&:hover>div]:inline-block'
]}>
{col}
<div class='float-right'>{() => $$(sortable[col]) ?
($$(sortdir[col]) === 'asc') ? <ExpandLessIcon /> : ($$(sortdir[col]) === 'desc') ? <ExpandMoreIcon /> : <SquareIcon /> : null}</div>
</th> : null}
Td={({ col, row, }) => {
const edit = $(false)
const inp = $<HTMLInputElement>()
const ref = $<HTMLTableCellElement>()
useEffect(() => $$(inp)?.focus())
return <td ref={ref} onClick={() => { edit(true); if (!isObservable(row[col])) row[col] = $(row[col]); useEffect(() => console.log($$(row[col]), data)) }}
class={['border-[1px] border-solid border-[lightgray] px-3 hover:bg-[#c4d7f5] w-[150px] p-0', col === 'age' ? 'text-right' : '']}>
{useMemo(() => $$(edit) ? <input style={{ width: () => $$(ref)?.offsetWidth }} class='px-2 m-0' ref={inp} onBlur={() => { edit(false); console.log('blur', $$(edit)) }} onChange={e => row[col](e.target.value)} value={row[col]}>{row[col]}</input> : <span class='px-2'>{row[col]}</span>)}
{/* <input style={{ width: () => $$(ref)?.offsetWidth }} class='p-0 m-0' ref={inp} onBlur={() => { edit(false); console.log('blur', $$(edit)) }} onChange={e => row[group](e.target.value)} value={row[group]}>{row[group]}</input> */}
</td>
}}
Tr={tw('tr')`hover:bg-[#ebf5d5]`}
/>
</>
}
const MainTabHook = () => {
const sortable = {
id: $(false),
name: $(true),
age: $(true),
country: $(true),
}
const sortdir: Record<string, Observable<SortDir>> = {
id: $<SortDir>(''),
name: $<SortDir>(''),
age: $<SortDir>(''),
country: $<SortDir>(''),
}
const filterable = {
name: $(true),
age: $(true),
country: $(true),
}
const sortorder: string[] = []
const data = $(db)
const filter = $<string>(null)
const showInput = $(false)
const showColummn = $(false)
const inputRef = $<HTMLInputElement>()
const inputCont = $<HTMLInputElement>()
const sortClick = (col: string) => {
const sd = sortdir[col]
if ($$(sortable[col]))
if ($$(sd) === '') {
sd('asc')
if (sortorder.indexOf(col) == -1)
sortorder.push(col)
}
else if ($$(sd) === 'asc') {
sd('desc')
if (sortorder.indexOf(col) == -1)
sortorder.push(col)
}
else if ($$(sd) === 'desc') {
sd('')
const pos = sortorder.indexOf(col)
sortorder.splice(pos, 1)
}
const keyValueArray = Object.entries(sortdir).map(([key, value]) => ({ key, value }))
const sorts = keyValueArray.filter(k => $$(k.value) !== '')
const fb = ft(db, d => !$$(filter) ? true : Object.keys(d).filter(k => $$(filterable[k])).some(k => d[k]?.toString().toLocaleLowerCase().indexOf($$(filter).toLocaleLowerCase()) >= 0))
if (sorts.length > 0)
data(orderBy(fb, sortorder, sortorder.map(k => $$(sortdir[k])) as any))
else
data(fb)
}
useClickAway(inputCont, () => showInput(false))
useEffect(() => $$(showInput) && $$(inputRef) && $$(inputRef).focus())
useEffect(() => {
$$(filter)
sortClick("")
})
const fi = <FilterIcon class='cursor-pointer inline-block' onClick={() => { showInput(true); $$(filter) }} />
const { Th, Td, Tr, table } = useTable({ data, class: 'w-1/2' })
Th(({ col, }) => <th onClick={() => sortClick(col)}
class={['text-[blue] border-[1px] border-solid border-[lightgray] uppercase',
() => $$(sortable[col]) ? 'cursor-pointer' : '',
// '[&>div]:hidden [&:hover>div]:inline-block'
]}>
{col}
<div class='float-right'>{() => $$(sortable[col]) ?
($$(sortdir[col]) === 'asc') ? <ExpandLessIcon /> : ($$(sortdir[col]) === 'desc') ? <ExpandMoreIcon /> : <SquareIcon /> : null}</div>
</th>)
Td(({ col, row, }) => {
const edit = $(false)
const inp = $<HTMLInputElement>()
const ref = $<HTMLTableCellElement>()
useEffect(() => $$(inp)?.focus())
return <td ref={ref} onClick={() => { edit(true); if (!isObservable(row[col])) row[col] = $(row[col]); useEffect(() => console.log($$(row[col]), data)) }}
class={['border-[1px] border-solid border-[lightgray] px-3 hover:bg-[#c4d7f5] w-[150px] p-0', col === 'age' ? 'text-right' : '']}>
{useMemo(() => $$(edit) ? <input style={{ width: () => $$(ref)?.offsetWidth }} class='px-2 m-0' ref={inp} onBlur={() => { edit(false); console.log('blur', $$(edit)) }} onChange={e => row[col](e.target.value)} value={row[col]}>{row[col]}</input> : <span class='px-2'>{row[col]}</span>)}
{/* <input style={{ width: () => $$(ref)?.offsetWidth }} class='p-0 m-0' ref={inp} onBlur={() => { edit(false); console.log('blur', $$(edit)) }} onChange={e => row[group](e.target.value)} value={row[group]}>{row[group]}</input> */}
</td>
})
Tr(tw('tr')`hover:bg-[#ebf5d5]`)
return <>
{() => $$(filter) && $$(filter).length > 0 ? <>{fi}<FilterOffIcon class='cursor-pointer inline-block' onClick={() => { showInput(false); filter(null) }} /></> : fi}
{
() => $$(showInput) ? <div ref={inputCont} class='inline-block'>
<input ref={inputRef} class='border' value={filter} onKeyup={e => { filter(e.target.value); console.log(e.target.value) }} onKeydown={e => { e.keyCode === 13 && (showInput(false), filter($$(changing))) }} />
<span class='bg-[#f8e3fa] border cursor-pointer' onClick={() => { showInput(false); filter(null) }}>✖</span>
<span class='bg-[#f7fae3] border cursor-pointer' onClick={() => { showInput(false) }}>✔</span></div> : null
}
<ViewColumnIcon class='cursor-pointer inline-block' onClick={() => { showColummn(true) }} />
{() => $$(showColummn) ? <></> : <></>}
{table}
</>
}
const App = (): JSX.Element => {
return <>
<MainTab />
< br />
{/* <MainTabHook />
< br /> */}
<Table data={groupedData} collapsed class='w-1/2'
Th={({ col, group }) => <th class='text-[blue] border-[1px] border-solid border-[lightgray]'>{col}</th>}
Tr={tw('tr')`hover:bg-[#ebf5d5]`}
Nr={tw('tr')`hover:bg-[#f5d6f0]`}
Gr={tw('tr')`hover:font-bold cursor-pointer`}
Gt={(props) => <Table {...props} class={'w-full'} />}
Gd={({ group, groups, collapse, data }) => { console.log('groups', groups); return <td class='border-[1px] border-solid border-[lightgray]' colSpan={groups.length}><span class={group.length > 1 ? '' : 'pl-2'}>{() => $$(collapse) ? <ExpandMoreIcon /> : <ExpandLessIcon />} {group} {isArray(data) ? <>[{data.length}] Avg: {(sumBy(data, 'age') / data.length).toFixed(0)}</> : ''}</span></td> }}
preprocessor={(d, k) => {
// console.log('preprocess', k)
if (k && k.length === 1 && k[0] === 'USA')
return Array.isArray(d) ? chain(d).groupBy((item) => item.name.charAt(0))
.mapValues((countryData) =>
sortBy(countryData, 'name')
)
.value() : d
return d
}}
/>
<br />
<Table data={nestedGroupData} collapsed class='w-1/2'
Th={({ col, }) => <th class='text-[blue] border-[1px] border-solid border-[lightgray]'>{col}</th>}
Tr={tw('tr')`hover:bg-[#ebf5d5]`}
Nr={tw('tr')`hover:bg-[#f5d6f0]`}
Gr={tw('tr')`hover:font-bold cursor-pointer`}
preprocessor={(d, k) => (console.log('preprocess', k), d)}
/>
</>
}
render(<App />, document.body)API
License
rc-table is released under the MIT license.