# Component/Table/VirtualizedDataTable

> Props: component-table-virtualizeddatatable.props.txt

## Examples


### Empty Data

```tsx
{
  render: args => {
    const cachedColumns = useMemo(() => args.columns as DataTableColumnsType<DataType> ?? columns, []);
    return <VirtualizedDataTable {...args} columns={cachedColumns} estimateSize={47} />;
  },
  args: {
    rows: [],
    selectableRows: true
  },
  parameters: {
    a11y: {
      disable: true
    }
  }
}
```

### Selection Large Data

selectableRows 속성 사용시 Selection 테이블을 구성할 수 있습니다. 각 테이블 로우는 고유의 key 속성이 존재해야합니다.

```tsx
{
  render: args => {
    const cachedColumns = useMemo(() => args.columns as DataTableColumnsType<DataType> ?? columns, []);
    const cachedRows = useMemo(() => Array.from({
      length: 1000
    }, (_, i) => ({
      ...selectionRows[i % selectionRows.length],
      key: 'fruit-' + i
    })), []);
    const [selectedRows, setSelectedRows] = useState<DataTableRowsType<DataType>>([]);
    const [selectedRowKeys, setSelectedRowKeys] = useState<Key[]>([]);
    const handleSelectedRows = (rowsKey: Key[], rows: DataTableRowsType<DataType>) => {
      console.log('Select Rows =>', rowsKey, rows);
      setSelectedRows(rows);
      setSelectedRowKeys(rowsKey);
    };
    return <Stack direction='column' gap={20}>
        <VirtualizedDataTable {...args} columns={cachedColumns} rows={cachedRows} onSelectRows={handleSelectedRows} rowSelection={selectedRowKeys} estimateSize={47} />
        <Stack direction='column' p={20} style={{
        backgroundColor: colors.gray10,
        borderRadius: '8px'
      }}>
          <BaseText>
            <b>{selectedRows.length}</b>개 Row 선택되었습니다.
          </BaseText>
        </Stack>
      </Stack>;
  },
  args: {
    selectableRows: true
  },
  parameters: {
    a11y: {
      disable: true
    },
    docs: {
      description: {
        story: 'selectableRows 속성 사용시 Selection 테이블을 구성할 수 있습니다. 각 테이블 로우는 고유의 key 속성이 존재해야합니다.'
      }
    }
  }
}
```

### Small Data

```tsx
{
  render: args => {
    const cachedColumns = useMemo(() => args.columns as DataTableColumnsType<DataType> ?? columns, []);
    return <VirtualizedDataTable {...args} columns={cachedColumns} estimateSize={47} />;
  },
  args: {
    rows: Array.from({
      length: 3
    }, (_, i) => ({
      ...selectionRows[i % selectionRows.length],
      key: 'fruit-' + i
    })),
    selectableRows: true
  },
  parameters: {
    a11y: {
      disable: true
    }
  }
}
```

### Summary

```tsx
() => <Stack direction='column' p={20} style={{
  backgroundColor: colors.gray10,
  borderRadius: '8px'
}}>
    <BaseText>DataTable에 가상화 기능이 추가된 테이블 컴포넌트입니다</BaseText>
  </Stack>
```