Introducing Finder: A Flexible Solution for Managing Complex, Non-Tabular Data in WordPress

In the world of web development, especially within WordPress, managing and displaying diverse data types can be challenging. Traditional table plugins excel at handling structured tabular data but often fall short when dealing with more flexible or unconventional data structures. That’s where Finder steps in—a powerful, lightweight module designed to handle data that doesn’t conform to standard tables, like in-game shops, inventories, dashboards, or any client-side data management tasks.

What is Finder?

Finder is an innovative data manipulation toolkit crafted with simplicity and reusability in mind. Although still in its early stages of development, it already offers a suite of features including searching, filtering, sorting, grouping, pagination, and item selection— all wrapped in an intuitive interface that is straightforward to implement and customize.

Why Choose Finder?

While popular options like TanStack Table or MUI’s DataGrid are robust, they are primarily optimized for traditional tabular data and come with considerable learning curves. Finder is intentionally designed to handle more abstract data scenarios, making it ideal for applications where data isn’t strictly tabular but still requires complex manipulation.

Core Functionality

At its core, Finder requires just two fundamental inputs:

1. An array of data items
2. A set of static or dynamic rules for filtering and grouping

A typical implementation might look like this:

“`jsx
function ItemList(items) {
const rules = createFinderRuleset([
searchRule({ searchFn: (item, term) => item.name.includes(term) }),
filterRule({ id: ‘category’, filterFn: (item, value) => item.category === value }),
groupByRule({ id: ‘group_by_type’, groupFn: (item) => item.type }),
]);

return (
    <Finder items={items} rules={rules}>
        {/* Custom input components such as search boxes, filters, etc. */}
        <YourInputsHere />
        <FinderContent>
            {({
                isLoading,
                emptyMessage,
                groupedItems,
                ungroupedItems,
                noMatchesMessage,
            }) => (
                <>
                    {isLoading && <p>Loading...</p>}
                    {!isLoading && emptyMessage && <p>{emptyMessage}</p>}
                    {groupedItems && groupedItems.map(group => (
                        <div key={group.id}>
                            <h2>{group.id}</h2>
                            {group.items