Dataframe

The DataFrame UI Library is a JavaScript library that provides a set of tools for managing and manipulating data in user interfaces. It is framework agnostic and can be used with any ui framework.

Features

Datasets: Manage and manipulate datasets with ease
- filtering, sorting, and aggregation.
- Joins: Combine datasets effortlessly with support for inner, outer, left, and right joins.
- Rollup: Summarize data across multiple dimensions, calculating aggregate statistics like sum, average, min, and max.
Modeling: Create and manage data models, including merging, renaming, and resolving conflicts.
Renaming: Simplify key renaming in JavaScript objects, with options for prefixes, suffixes, and custom separators.
Dataviews: Create interactive views for exploring and analyzing datasets, including sortable and filterable columns.

Dataset

The dataset function initializes a dataset from an array of objects.
This dataset comprises data rows that are sortable, filterable, and groupable.
Leverage dataset for SQL-like operations such as selecting, updating, and deleting rows.
Employ aggregate functions like sum, average, and count for summarizing multiple attributes of the data.
Utilize the dataset for various data operations like joining and merging data from disparate sources.
Establish connected data views with joins to visualize data relationships, particularly for tracking parent-child connections.

Refer to dataset documentation for more details.

DataView

Utilize the dataview function to create a data view, enabling dynamic data manipulation and observation.
This view facilitates sorting, filtering, and grouping data while providing insight into selected or hidden rows.
The original dataset remains untouched while the view offers flexible data presentation options.
Associate actions such as select, edit, and delete with data rows using action columns within the view.
Manage data effectively, including parent-child links, even within a flat array structure.

Refer to dataview documentation for more details.

Example

Here's how to use the dataview function from the DataFrame UI Library in a function-based approach:

import { dataview } from '@jerrythomas/dataframe'

// Sample data
const data = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 }
  // more data...
]

// Create a new view of the data
const view = dataview(data)

// Sort the data by the 'name' field
view.sortBy('name')

// Filter data to only include top-level items
view.filter((row) => row.age > 25)

The dataview function initializes a manageable data state with methods that allow for manipulation and observation of data changes, integrating smoothly with UI updates.