본문으로 건너뛰기

Table

설정을 통해 테이블을 렌더링 할 수 있게 해주는 컴포넌트입니다.

export function TableBasic(){

  const [ data, setData ] = useState({
    selected: false,
    name: 'my name',
    etc: '그리드를 연구할 때는 번호가 매겨진 라인부터 시작하는 것이 가장 논리적일 겁니다.\n왜냐하면, 그리드 레이아웃을 쓸 때마다 거기엔 항상 번호가 매겨진 라인이 있기 때문입니다.\n행과 열의 각 라인에는 번호가 매겨져 있으며, 라인에 번호를 매길 때는 1번부터 시작합니다.\n그리드 라인은 문서의 작성 모드를 기준으로 번호가 매겨진다는 것을 명심하십시오.\n영어와 같이 왼쪽에서 오른쪽으로 읽히는 언어로 쓰인 문서에서는 1번 라인이 그리드의 맨 왼쪽에 위치합니다.\n반대로 오른쪽에서 왼쪽으로 읽히는 언어의 문서에서는 1번 라인이 그리드의 맨 오른쪽에 위치하게 됩니다.\n문서 작성 모드와 그리드 사이의 상호 작용에 대해서는 나중에 자세히 알아보겠습니다.',
    form3: '01',
  });

  return <Frame>
    <div style={{marginBottom:'15px'}}>{JSON.stringify(data)}</div>
    <Table
    formId='my-form'
    data={data}
    setData={(d)=>{
      setData(d)
    }}
    headers={[
      {
        label: '선택',
        targetId: 'selected',
        editable: true,
        formType: 'check',
        width: 100,
      },
      {
        label: '이름',
        targetId: 'name',
        textAlign: 'center',
      },
      {
        label: '입력 select',
        targetId: 'form3',
        editable: true,
        formType: 'select',
        required: true,
        item:[
          {label:'선택1', value:'01'},
          {label:'선택2', value:'02'},
        ]
      },
      {
        label: '비고',
        targetId: 'etc',
        colSpan: 3,
        textAlign: 'left',
        required: true,
        whiteSpace: 'pre-wrap',
        onChange: (param) => {
          console.log('비고 changed', param);
        },
      },
    ]}
    columnCountPerRow={3}
    tableStyle={{ tableWidth: '100%', labelWidth: '100px' }}
    />
  </Frame>
}

기본 속성​

(optional) columnCountPerRow​

한 행에 몇개의 컬럼을 렌더링 할지를 정합니다.

만약 이 값이 3이면 한 행에 3개의 컬럼을 렌더링합니다.

(optional) tableStyle​

테이블의 스타일을 정의합니다. 타입은 여기를 참고하세요.

(optional) headlessMode​

headlessMode = boolean

이 값이 true 인 경우 헤더 없이 값만 렌더링 합니다.

headers​

headers = TableHeader<T>[]

headers 는 테이블에 렌더링될 컬럼을 정의합니다.

label​

label = string

헤더에 표시될 내용을 정의합니다.

targetId​

targetId = keyof T

(optional) formType​

formType = GridFormItemType = 'input' | 'select' | 'check' | 'textarea'

컬럼을 일반 텍스트가 아닌 form 으로 처리합니다. 특성은 Form 과 동일합니다.

(optional) required​

required = boolean

form 의 required 속성을 지정합니다.

(optional) editable​

editable = boolean

form 의 편집가능 여부를 지정합니다. 이 값을 false 로 하면 formType 이 지정되더라도 일반 텍스트로 렌더링됩니다.

(optional) item​

item = SelectItem<unknown>[];

formType 이 select 일때 option 을 정의합니다. Select 컴포넌트의 item 과 동일합니다.

(optional) selectType​

selectType = SelectType

formType 이 select 일때 렌더링 타입을 지정합니다. Select 컴포넌트의 type 과 동일합니다.

(optional) maxLength​

maxLength = number

form 의 maxLength 속성을 지정합니다.

(optional) onChange​

onChange = (param: TableEventParam<T>) => void

특정 컬럼의 값이 변경되었을때 호출됩니다. 이벤트의 파라미터는 여기를 참조하세요.

(optional) renderer​

TableRenderFunction<T> = (header:TableHeader<T>, data:T)=>JSX.Element
renderer = (param: TableRenderFunction<T>) => void

header 와 data 를 받아서 특정 컬럼을 직접 렌더링 할 수 있는 함수입니다.

(optional) headerRenderer​

TableHeaderRenderFunction<T> = (header:TableHeader<T>)=>JSX.Element
headerRenderer = (param: TableHeaderRenderFunction<T>) => void

header 받아서 특정 컬럼의 헤더를 직접 렌더링 할 수 있는 함수입니다.

(optional) defaultTextValue​

defaultTextValue = string

헤더에 대한 필드에 값이 없을때 기본으로 나오는 텍스트를 지정합니다.

(optional) textFormat​

TableFormatType = {
  searchValue:RegExp;
  replaceValue:string;
} | TableFormatFunction<T> = (data: T, header: TableHeader<T>) => string
textFormat = TableFormatType

주어진 조건으로 텍스트를 포맷팅 합니다.

TableFormatFunction 함수형태로 지정하는 경우에는 data 와 header 값을 가지고 원하는 로직으로 포맷처리가 가능합니다. 그외에는 searchValue 를 찾아서 replaceValue 로 String.replace 처리합니다.

(optional) whiteSpace​

whiteSpace = CSSProperties['whiteSpace']

텍스트의 fontWeight 설정입니다.

(optional) colSpan​

colSpan = number

colSpan 숫자만큼 병합합니다.

(optional) rowHeight​

rowHeight = string

테이블 한 행의 높이를 설정합니다.

(optional) width​

width = number

컬럼의 폭을 지정합니다.

Form 속성​

테이블은 기본적으로 Form 컴포넌트의 속성과 특징을 이어받습니다.

타입 설명​

TableEventParam<T>​

이름타입설명
headerTableHeader<T>헤더 정보
dataT전체데이터정보
targetIdkeyof T변경된 속성ID
headersTableHeader<T>전체 헤더정보

TableStyle​

이름타입설명
classNamestring테이블 루트에 들어갈 class 를 지정합니다.
rowHeightstring기본 행의 높이를 지정합니다.
labelWidthstringlabel 의 기본 폭을 지정합니다.
columnWidthstring컬럼의 기본 폭을 지정합니다.
tableWidthstring테이블의 전체 폭을 지정합니다.