Introducing Finder: A Versatile Solution for Managing Non-Tabular Data in WordPress Websites
In the world of web development, managing structured data is often straightforward when dealing with traditional tables. However, challenges arise when you need to handle datasets that don’t conform to standard tabular formats—such as in-game shop inventories, user profiles, or customizable dashboards. To address this, I’ve developed a tool called Finder, designed to simplify client-side data management for a variety of applications within WordPress and beyond.
What is Finder?
Finder is a lightweight, alpha-stage module that empowers developers to create intuitive interfaces for data manipulation—regardless of whether your data is organized in rows and columns. Built out of necessity for my professional projects, Finder facilitates building interactive components like in-game shops, user dashboards, inventory systems, and more. Its core principles are simplicity, reusability, and flexibility.
Key Features
- Seamless searching, filtering, sorting, and grouping
- Pagination and item selection
- Metadata storage for selected items
- User-friendly, low learning curve
While popular libraries like Tanstack Table and MUI’s DataGrid excel at tabular data presentation, they can be overly complex or rigid for non-standard data structures. Finder offers a more adaptable approach suited for dynamic datasets that don’t fit traditional tables.
How Does It Work?
Fundamentally, Finder operates with just two inputs:
- An array of items (your dataset)
- Static rules defining how to filter, search, or group the data
Here’s a simplified example to illustrate its usage:
“`jsx
function InventoryDisplay(items) {
const rules = createFinderRuleset([
searchRule({
searchFn: (item, searchTerm) => item.name.includes(searchTerm),
}),
filterRule({
id: ‘category’,
filterFn: (item, value) => item.category === value,
}),
groupByRule({
id: ‘group_by_type’,
groupFn: (item) => item.type,
}),
]);
return (
{/ Insert custom input components for user interaction here /}
{{
loading: ‘Loading data…’,
empty: ‘No items to display.’,
groups: (groups) =>
groups.map(({ id, items }) => (
{id}
{items.map((item)
