Skip to content

Instantly share code, notes, and snippets.

@dayhaysoos
Created November 6, 2021 13:24
Show Gist options
  • Select an option

  • Save dayhaysoos/2fa146d61435da09d81e1ff5e560e2da to your computer and use it in GitHub Desktop.

Select an option

Save dayhaysoos/2fa146d61435da09d81e1ff5e560e2da to your computer and use it in GitHub Desktop.
// column
const columns = React.useMemo(
() => [
{
id: 'expander',
accessor: '',
Header: ({ getToggleAllRowsExpandedProps, isAllRowsExpanded }) => (
<span {...getToggleAllRowsExpandedProps()}>
{isAllRowsExpanded ? 'πŸ‘‡' : 'πŸ‘‰'}
</span>
),
Cell: ({ row }) => {
return (
// Use the row.canExpand and row.getToggleRowExpandedProps prop getter
// to build the toggle for expanding a row
row.canExpand ? (
<span
{...row.getToggleRowExpandedProps({
style: {
// We can even use the row.depth property
// and paddingLeft to indicate the depth
// of the row
paddingLeft: `${row.depth * 2}rem`
}
})}
>
{row.isExpanded ? 'πŸ‘‡' : 'πŸ‘‰'}
</span>
) : null
)
}
},
{
Header: 'UID',
accessor: 'id',
disableFilters: true,
Cell: function UID(props) {
return props.value.split('-')[0]
}
},
{
Header: 'Country',
accessor: 'country'
},
{
Header: 'Education',
accessor: 'education'
},
{
Header: 'Experience',
accessor: 'years_of_exp'
},
{
Header: 'Skills',
accessor: 'skills',
Filter: TagFilter,
Cell: function Skill(props) {
return <Skills skills={props.value} />
}
}
],
[]
)
// usetable hook
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
state,
state: { expanded },
visibleColumns,
preGlobalFilteredRows,
setGlobalFilter
} = useTable(
{
columns,
data,
defaultColumn,
filterTypes,
useState
},
useGlobalFilter, // useGlobalFilter!
useFilters,
useExpanded
)
@derekr

derekr commented Nov 9, 2021

Copy link
Copy Markdown

Have you tried not setting accessor at all? If you don't get it working by tomorrow I can hop on a zoom or something to pair if you're down.

@dayhaysoos

Copy link
Copy Markdown
Author

I'd be down to pair! I'll let you know tomorrow.

I have tried with no accessor, too. No good :(

@derekr

derekr commented Nov 9, 2021

Copy link
Copy Markdown

πŸ‘ Aight I'll hit you up tomorrow on twitter!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment