2016-11-26 8 views
1

React에서 동적 테이블을 보관할 데이터 구조를 만들려고합니다. 현재, 나는테이블 데이터 구조 디자인

[ 
    {item00: "data 0", item01: "data 1", item02: "data 2"}, 
    {item10: "data 3", item11: "data 4", item12: "data 5"}, 
    {item20: "data 6", item21: "data 7", item22: "data 8"} 
] 

로 내 데이터를 잡고 새 행이

{item30: "data 9", item31: "data 10", item32: "data 11"} 

를 추가 의미 추가하고 새 열이 마지막에 item03, item13, item23item33를 삽입하는 의미 추가 해요 각 행의

제 질문은 사용할 수있는 데이터 구조가 더 있습니까? 새 열을 쉽게 삽입 할 수있는 방법을 찾는데 어려움을 겪고 있습니다.

또한 추가/삭제할 열의 카운터를 유지하는 방법은 무엇입니까? 나는 그 일을 특정 방법이 있습니다 확신 해요,하지만 난

+0

달성하려는 더 큰 목표에 대해 자세히 알려 줄 수 있습니까? 이것은 XY 문제처럼 느껴지 긴하지만 말하기는 어렵습니다. Flux 또는 Redux를 사용하고 있습니까? – jmargolisvt

+0

난 단지 데이터를 포함하는 테이블의 크기를 동적으로 늘릴 수 있기를 원한다. 내 데이터는 문자 그대로 테이블이지만 조건을 나타내는 옵션과 열을 나타내는 행이 있습니다. 현재 데이터가있는 테이블을 표시하고 사용자가 열 추가/행 추가 버튼을 누를 수 있도록 할 것입니다. 나는이 웹 앱에 매우 익숙하다. 나는 둘 중 하나를 사용하고 있는지 잘 모르겠다. 나는 Meteor 위에 React를 사용하고있다. – adinutzyc21

답변

1

당신이 고려할 수,

은 행으로 Array 내부의 각 요소를 확인하십시오 .. 문제가 해당 검색어와 오는 데 문제가 있습니다.

예 :

[{}, {}, {}, {}] //each {} is a row 

열로서 Object 내부 각 요소를 확인한

예 :

새로운 행은 동일하거나 추가 열로 Array 안에 추가 될 수

[ 
    {name: "xyz", age: "21", location: "india"}, //this will be a row 
    //name, age, location will be columns 
] 
.

예 :

원본 데이터

var에 t = [ {이름 : "XYZ", 연령 : "21", 위치 : "인도는"}, ]

새로운 데이터 추가

t.push({name: 'abc', age: '44', location: 'india', phone: 56654345}) 

렌더링 테이블이 될 것입니다

Name  Age  Location Phone 
-------------------------------------- 
xyz | 21 | india | 
abc | 44 | india | 56654345 

희망이 도움이됩니다.

+0

고마워, 그게 내가하고 있었던 일이야. 나는 이것이 가장 감각적이고 더 좋은 방법이 없다고 생각합니다. – adinutzyc21