Convert Figma logo to code with AI

openstatusHQ logodata-table-filters

A playground for tanstack-table

1,523
79
1,523
16

Top Related Projects

1,336

React Table

14,104

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

Datatable for React based on material-ui's table with additional features

A responsive table library with built-in sorting, pagination, selection, expandable rows, and customizable styling.

Datatables for React using Material-UI

Quick Overview

The openstatusHQ/data-table-filters repository is a React component library for building advanced data table filters. It provides a set of customizable and reusable components that allow developers to create complex filtering interfaces for data tables, enhancing the user experience in data-heavy applications.

Pros

  • Highly customizable and flexible filtering components
  • Seamless integration with React applications
  • Improved user experience for data table interactions
  • Responsive design for various screen sizes

Cons

  • Limited documentation and examples
  • Potential performance issues with large datasets
  • Dependency on specific React versions
  • Steep learning curve for complex filter configurations

Code Examples

  1. Basic Filter Component:
import { Filter } from '@openstatus/data-table-filters';

function BasicFilter() {
  return (
    <Filter
      column="name"
      operator="contains"
      value="John"
      onChange={(newFilter) => console.log(newFilter)}
    />
  );
}
  1. Multiple Filters:
import { FilterGroup } from '@openstatus/data-table-filters';

function MultipleFilters() {
  return (
    <FilterGroup>
      <Filter column="age" operator="greaterThan" value={18} />
      <Filter column="status" operator="equals" value="active" />
    </FilterGroup>
  );
}
  1. Custom Filter Component:
import { createFilter } from '@openstatus/data-table-filters';

const DateRangeFilter = createFilter({
  type: 'dateRange',
  component: ({ value, onChange }) => (
    <div>
      <input
        type="date"
        value={value.start}
        onChange={(e) => onChange({ ...value, start: e.target.value })}
      />
      <input
        type="date"
        value={value.end}
        onChange={(e) => onChange({ ...value, end: e.target.value })}
      />
    </div>
  ),
});

Getting Started

To use the data-table-filters in your React project:

  1. Install the package:

    npm install @openstatus/data-table-filters
    
  2. Import and use the components in your React application:

    import { Filter, FilterGroup } from '@openstatus/data-table-filters';
    
    function MyComponent() {
      return (
        <FilterGroup>
          <Filter column="name" operator="contains" value="" />
          <Filter column="age" operator="greaterThan" value={0} />
        </FilterGroup>
      );
    }
    
  3. Customize the filters and handle changes as needed in your application logic.

Competitor Comparisons

1,336

React Table

Pros of table

  • More comprehensive and feature-rich, offering advanced functionalities like pagination, sorting, and custom cell rendering
  • Better documentation and examples, making it easier for developers to implement and customize
  • Larger community and more frequent updates, ensuring better long-term support and maintenance

Cons of table

  • Steeper learning curve due to its extensive API and configuration options
  • Heavier package size, which may impact application performance and load times
  • Less focus on modern React patterns and hooks, potentially making it less suitable for newer React projects

Code Comparison

data-table-filters:

<DataTable
  columns={columns}
  data={data}
  filters={filters}
  onFilterChange={handleFilterChange}
/>

table:

<Table
  columns={columns}
  dataSource={data}
  pagination={{ pageSize: 10 }}
  onChange={handleTableChange}
/>

The code comparison shows that data-table-filters has a more straightforward API focused on filtering, while table offers more built-in features like pagination. The table component requires additional configuration for advanced functionalities, which can be both an advantage (flexibility) and a disadvantage (complexity) depending on the use case.

14,104

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

Pros of ag-grid

  • More comprehensive and feature-rich data grid solution
  • Supports multiple frameworks (React, Angular, Vue, etc.)
  • Extensive documentation and community support

Cons of ag-grid

  • Steeper learning curve due to its complexity
  • Larger bundle size, which may impact performance
  • Commercial license required for advanced features

Code Comparison

data-table-filters:

<DataTable
  columns={columns}
  data={data}
  filters={[
    { id: 'name', label: 'Name', type: 'text' },
    { id: 'age', label: 'Age', type: 'number' }
  ]}
/>

ag-grid:

<AgGridReact
  columnDefs={columnDefs}
  rowData={rowData}
  defaultColDef={{
    filter: true,
    floatingFilter: true
  }}
/>

Summary

data-table-filters is a lightweight, focused solution for adding filters to data tables, while ag-grid is a more comprehensive data grid library with advanced features. data-table-filters is easier to set up and use for simple filtering needs, but ag-grid offers more flexibility and functionality for complex data management scenarios. The choice between the two depends on the specific requirements of your project and the level of customization needed.

Datatable for React based on material-ui's table with additional features

Pros of material-table

  • More comprehensive feature set, including sorting, filtering, and grouping
  • Better documentation and examples
  • Larger community and more frequent updates

Cons of material-table

  • Heavier package size due to more features
  • Steeper learning curve for complex implementations
  • Dependency on Material-UI, which may not fit all project designs

Code Comparison

material-table:

import MaterialTable from 'material-table';

<MaterialTable
  columns={[
    { title: 'Name', field: 'name' },
    { title: 'Age', field: 'age', type: 'numeric' },
  ]}
  data={[
    { name: 'John', age: 30 },
    { name: 'Jane', age: 25 },
  ]}
/>

data-table-filters:

import { DataTable } from '@openstatus/data-table-filters';

<DataTable
  columns={[
    { accessorKey: 'name', header: 'Name' },
    { accessorKey: 'age', header: 'Age' },
  ]}
  data={[
    { name: 'John', age: 30 },
    { name: 'Jane', age: 25 },
  ]}
/>

material-table offers a more feature-rich solution with built-in functionality, while data-table-filters provides a lighter, more customizable approach. The choice between them depends on project requirements and design preferences.

A responsive table library with built-in sorting, pagination, selection, expandable rows, and customizable styling.

Pros of react-data-table-component

  • More comprehensive feature set, including sorting, pagination, and selection
  • Higher level of customization options for styling and behavior
  • Larger community and more frequent updates

Cons of react-data-table-component

  • Steeper learning curve due to more complex API
  • Heavier bundle size, which may impact performance for smaller projects
  • Less focus on specific filtering functionality compared to data-table-filters

Code Comparison

data-table-filters:

<DataTable
  data={data}
  columns={columns}
  filters={[
    { key: 'name', label: 'Name', type: 'text' },
    { key: 'age', label: 'Age', type: 'number' }
  ]}
/>

react-data-table-component:

<DataTable
  columns={columns}
  data={data}
  pagination
  selectableRows
  customStyles={customStyles}
  onSort={handleSort}
/>

The code comparison shows that data-table-filters focuses on a simpler API with built-in filter configuration, while react-data-table-component offers more advanced features like pagination and row selection out of the box.

react-data-table-component provides a more feature-rich solution with greater flexibility, but at the cost of increased complexity and potentially larger bundle size. data-table-filters offers a more streamlined approach, focusing specifically on filtering functionality with a simpler API, which may be preferable for projects with specific filtering requirements or those prioritizing a smaller footprint.

Datatables for React using Material-UI

Pros of mui-datatables

  • More comprehensive feature set, including built-in sorting, filtering, and pagination
  • Better integration with Material-UI components and styling
  • Larger community and more frequent updates

Cons of mui-datatables

  • Heavier package size due to more features and dependencies
  • Steeper learning curve for customization and advanced usage
  • Less flexibility for custom styling outside of Material-UI theming

Code Comparison

data-table-filters:

<DataTable
  columns={columns}
  data={data}
  filters={filters}
  onFilterChange={handleFilterChange}
/>

mui-datatables:

<MUIDataTable
  title={"Employee List"}
  data={data}
  columns={columns}
  options={options}
/>

The code comparison shows that mui-datatables requires more configuration through the options prop, while data-table-filters has a more straightforward API for basic filtering functionality. mui-datatables offers more built-in features out of the box, but data-table-filters provides a simpler approach for basic table filtering needs.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

About The Project

This is a standalone data-table demo that we will be using within the OpenStatus dashboard.

Data Table with Infinite Scroll

Visit data-table.openstatus.dev to learn more.

To make it not only more accessible for you to use, but also work on PoC/MVP with data-tables, we have started this repository. We will maintain it and add new examples over time.

It currently includes two main concepts:

The UI is heavily inspired by datadog and vercel log tables.

[!NOTE] We are working on a Guide to help you get started and not wild guess anymore.

More Examples:

Built With

Our stack is:

We will consider making an example with vitejs for all our raw react lovers. Contributions are welcome!

Getting Started

No environment variable required. Run the development server:

pnpm dev

Open http://localhost:3000 with your browser to see the result.

Want more?

If you are looking for specific use-cases or like what we are building and want to hire us, feel free write us to hire@openstatus.dev or book a call via cal.com.

Credits