고정 열

StkTableColumn['fixed'] = 'left' 또는 'right'를 설정하여 왼쪽 또는 오른쪽 고정 열 효과를 구현할 수 있습니다.

::: info全新的 고정 열 인터랙션 테이블에서 sticky를 사용하여 고정 열을 구현했기 때문에 열 흡착 기능을 지원합니다. 임의의 열을 고정 열로 설정할 수 있으며, 열이 가시 영역을 벗어날 때만 고정됩니다. :::

기본

열 설정demo

const columns: StkTableColumn<any>[] = [
    { title: 'Name', dataIndex: 'name', fixed: 'left', width: 100 },
    { title: 'Age', dataIndex: 'age', width: 100 }, 
    { title: 'Address', dataIndex: 'address', width: 200 }, 
    // Gender 列前面的列都必须指定列宽
    { title: 'Gender', dataIndex: 'gender', width: 50, fixed: 'left' },
    { title: 'Email', dataIndex: 'email' },
    { title: 'Phone', dataIndex: 'phone' },
    { title: 'Company', dataIndex: 'company'  },
    { title: 'Operation', dataIndex: 'operation', fixed: 'right', width: 100 },
];

WARNING

고정 열의 흡착 위치를 열 너비로 계산해야 하므로, 왼쪽 고정 열 앞의 모든 열은 반드시 열 너비를 지정해야 합니다.

위의 표에서 Gender 열 앞의 모든 열은 열 너비를 설정해야 합니다. 오른쪽 고정도 동일합니다.

오른쪽 고정 열이 "이상"한가요?

오른쪽 고정 열은 일반적으로 columns의 마지막에 선언합니다. 이 경우 해당 열들은 열 너비 설정과 무관하게 항상 고정된 상태를 유지합니다.

단, 흡착 효과(열이 가시 영역을 벗어날 때만 흡착되는 효과 및 고정 열 그림자)가 필요하다면 모든 열에 너비를 지정해야 합니다. 흡착 위치는 각 열의 너비를 누적해 계산하기 때문에, 중간의 어떤 열(아래의 url 열 등)에 width가 없으면 계산 결과가 실제 렌더링 너비와 달라져 흡착 시점이 이상해집니다.

const columns: StkTableColumn<any>[] = [
    { title: 'Name', dataIndex: 'name', width: 100 },
    { title: 'Stream URL', dataIndex: 'url' }, // ❌ 너비 미설정, 흡착 계산이 부정확해짐
    { title: 'Operation', dataIndex: '_action', fixed: 'right', width: 150 },
];

loading

표를 가로로 스크롤할 때 Gender 열이 자동으로 왼쪽에 흡착되는 것을 볼 수 있습니다.

TIP

모든 열을 가장 왼쪽에 놓으려면, 고정 왼쪽 열을 columns의 가장 앞에 놓으세요. 마찬가지로 오른쪽 고정 열은 모두 columns의 마지막에 놓으세요.

고정 열 그림자

기본적으로 고정 열에는 그림자 효과가 없습니다. 그림자 효과를 원하시면 fixedColShadow 속성을 true로 설정하세요.

<StkTable fixed-col-shadow></StkTable>

가상 리스트 열 고정

loading

WARNING

props.virtualX 가로 가상 리스트를 설정하면, 열 너비가 설정되지 않은 열은 모두 100px로 강제 설정됩니다.