https://github.com/syzygypl/react-data-display

(Work in Progress/Experimental) Small library based on the react-virtualized for displaying data in different ways (e.g. regular table or list)
https://github.com/syzygypl/react-data-display

data-table react react-virtualized

Last synced: about 1 month ago
JSON representation

(Work in Progress/Experimental) Small library based on the react-virtualized for displaying data in different ways (e.g. regular table or list)

• Host: GitHub
• URL: https://github.com/syzygypl/react-data-display
• Owner: syzygypl
• License: mit
• Created: 2017-02-16T12:00:28.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-02-17T13:25:46.000Z (over 9 years ago)
• Last Synced: 2025-05-08T16:52:01.207Z (about 1 year ago)
• Topics: data-table, react, react-virtualized
• Language: JavaScript
• Size: 153 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-data-display

This is a **work in progress**, API **will** most likely change.

`react-data-display` is build upon fantastic `react-virtualized` library. We provide simple and clear abstraction layer

for defining the data model and data presentation layer. You describe your data using `DataField` components, provide data

to the `DataDisplay` component and use preferred view component (at this point `TableView` and `ListView` components are available).

Plans for the very near future:

* add support for nested `` components ("subheaders")

* improve `` implementation

* improve everything regarding width/height (fixed values and auto-sizing/filling the parent component sizes)

* add simple default styles

* add support for style customization

* implement support for custom label and content/"cell" components

* implement redux-connected version of the ``

Later improvements:

* make generic `View` component that `TableView` and `ListView` (and later possibly other) can inherit. Such component

would contain common logic/utils, e.g. for processing `` components

* improve build setup (esp. for npm publishing)

## Notes

Build configuration is copied from the react-virtualized.

## Basic Usage Example

```jsx

import React from 'react';

import { DataDisplay, DataField, TableView, ListView } from 'react-data-display';

const data = [

    {id: 'id-1', name: 'name-1', test: 'test-1'},

    {id: 'id-2', name: 'name-2', test: 'test-2'},

    {id: 'id-3', name: 'name-3', test: 'test-3'},

    {id: 'id-4', name: 'name-4', test: 'test-4'},

    {id: 'id-5', name: 'name-5', test: 'test-5'},

    // more items

];

export class DataTableExample extends React.Component {

    render() {

        return (

            

                

                    

                    

                    

                    

                

            

        );

    }

}

export class DataListExample extends React.Component {

    render() {

        return (

            

                

                    

                    

                    

                    

                

            

        );

    }

}

```