thomasjang / datagrid

@a-component/datagrid

React Datagrid Component

Example

http://a-component.github.io/datagrid/

Install

$ npm install @a-c/datagrid --save

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import {
    Datagrid,
    DatagridHeader,
    DatagridBody,
    DatagridHorizontalScroller,
    DatagridVerticalScroller,
} from '@a-c/datagrid';

const columns = [
    {key: "id", label: "ID"},
    {key: "name", label: "Name"},
];
const data = [
    {value: {id: "1", name: "tom"}},
    {value: {id: "2", name: "seowoo"}},
    {value: {id: "3", name: "seowoo"}},
    {value: {id: "4", name: "seowoo"}},
    {value: {id: "5", name: "seowoo"}},
    {value: {id: "6", name: "seowoo"}},
    {value: {id: "7", name: "seowoo"}},
    {value: {id: "8", name: "seowoo"}},
    {value: {id: "9", name: "seowoo"}},
    {value: {id: "10", name: "seowoo"}},
    {value: {id: "11", name: "seowoo"}},
    {value: {id: "12", name: "seowoo"}},
    {value: {id: "13", name: "seowoo"}},
    {value: {id: "14", name: "seowoo"}},
    {value: {id: "15", name: "seowoo"}},
    {value: {id: "16", name: "seowoo"}},
    {value: {id: "17", name: "seowoo"}},
];

ReactDOM.render(
    <Datagrid
        width={500}
        height={400}
        headerHeight={28}
        bodyRowHeight={28}
        columns={columns}
        data={data}
        dataLength={data.length}
        enableLineNumber
    >
        <DatagridHeader/>
        <DatagridBody>
            <DatagridVerticalScroller size={12}/>
            <DatagridHorizontalScroller size={12}/>
        </DatagridBody>
    </Datagrid>
    , container);

Development

$ npm install
$ npm run storybook

datagrid's Issues

fix: custom horizontal scroll error

수평 커스텀 스크롤 바로 스크롤링을 할 때 스크롤이 되지 않는 이슈입니다

Bug : Modify resizer component click area

Description

The resizing feature overlaps with the data alignment feature, so resizing selection is not good.

Progress

• Check the currently selectable area of resizer.
• Check data alignment feature and resizer feature hover style.
• Modify resizer component

Related issue: #12 #8

Feature: Sorting data

Description

The user could feel inconvenient to access the data because there is a not a feature to sort the data at gird.

Progress

• Add the feature to sort the data at grid
• Order by string, number etc.

Feature : data fillteriling

Description

the data shows only what filtered data.

Progress

• Add feature : User needs to select filter types
• Add feature : Search the value what want to see

Feature: synchronize line number area and body main panel when scrolling

Description

When scrolling, there is an issue that the line number area and the body main panel area are not synchronized perfectly.
I'll solve this problem by incorporating the line number area into the body scroll area.

Progress

• incorporate the line number area into the body scroll area.

Feature: column resizing

Description

add column resizing feature.

Progress

• create column border component
• add mouse hover event handler to column border component
• add drag event (mouse down, mouse move, mouse up) to column border component
• resize column component as mouse move

Feature: Formatting of data

Description

Add feature that Users can change the values using predefined in formater, or the values as desired using a user-defined function and apply the formula to the data in the column.

Progress

• add predefined formater.
• apply the formula to the data in the column.

Refactoring: Modify DatagridBody component structure

(1)

-- DatagridBody

​	-- BodyLeftPanel

​	-- BodyMainPanel

​		-- scroll-content

​			-- body_aside_table

​			-- body_main_table (BodyTable)

⬇

(2)

-- DatagridBody

​	-- scroll-content

​		-- BodyAsidePanel

​			-- body_aside_table

​		-- BodyLeftPanel

​		-- BodyMainPanel

​			-- body_main_table (BodyTable)

(1)번 구조에서 (2)번 구조로 변경하려고 합니다

구조 변경 이유 :

• (1)번 구조에서는 BodyLeftPanel 컴포넌트가 고려되지 않음
• 어차피 BodyAsidePanel, BodyLeftPanel, BodyMainPanel이 모두 한 스크롤 영역으로 묶여야 하기 때문에,
  scroll-content를 세 컴포넌트 바깥으로 빼고
  세 컴포넌트를 같은 레벨에 두는 것이 더 관리하기 편하고 코드 구성이 깔끔해질 듯함

Docs : english and korean ver update

Description

영어와 한글로 이루어진 readme 업데이트

Progress

• 영문판 리드미 작성
• �한국어판 리드미 작성

Docs : fix reademe form

Description

영어와 한글로 이루어진 readme 업데이트

Progress

• 영문판 리드미 작성
• �한국어판 리드미 작성

Feature: add Item click feature

Description
add Item click feature.
Progress

• 
add Item click event handler to render that border of item

• 
add drag event (mouse down, mouse move, mouse up) to BodyTable component

Bug: When a small amount of data is input, a difference in height between the asid panel and the body table occurs.

Description

적은 양의 데이터가 입력으로 들어올 때, asid panel과 body table각 행의 높이가 다릅니다.

Feature: color-theme

Description

add color-theme feature.

Progress

• Class classification work by color-theme
• Create color-selector box component
• Create a button that can turn the class on/off
• Create a button that can customize color-theme

Feature : add cell editing & click event

Description

If you click on the cell, it should change from a to b and it could change the cell value

Progress

• when click the cell. it could change a cell value
• When clicking the �cell, you can call the callback functions.
• if you want to switch on editing feature. you can do that whatever you want

bug: aside panel number line style error

• aside panel 영역이 table line에 맞춰 색이 칠해집니다.

Feature : Inline editing handler

Current behavior (bug)

When click the content It doesn't change a value.
so I want to make editing handler

Expected behavior (correct)

I want to make the handler.
possible to change a value When the user double clicks a value content

사용자 예시 사이트 제공

gh-page를 사용자 예시 사이트로 활용하면 좋을듯합니다.
예시 사이트도 다 만들기보다 스토리북을 잘 정리해서 호스팅하는 게 어떨까 싶습니다.
ref: https://github.com/storybookjs/storybook-deployer

Feature: Freeze panes to lock columns and rows

Description

Add Freeze pane(틀 고정) feature which locks specific rows or columns in place
in order to keep them in view while scrolling.

Progress

• columns freeze pane
• rows freeze pane