# Component/ColumnViewController

> Props: component-columnviewcontroller.props.txt

## Examples


### Base

```tsx
{
  render: args => {
    const {
      columns = fixedColumns,
      ...rest
    } = args;
    const [_columns, setColumns] = useState<Array<TableColumnViewType<DataType>>>((columns as Array<DataTableColumnType<DataType>>).map(column => ({
      ...column,
      width: column.width ?? 100,
      isOn: true
    })));
    return <Stack direction='column' width={900} gap={8}>
        {/* @ts-expect-error: TS2322 */}
        <ColumnViewController columns={_columns} onChange={setColumns} width={250} {...rest}>
          <Button kind='outlined_secondary' startIcon={<IconThreeBars color={semantic_colors.content.primary} />}>
            <BaseText kind='Body_13_Medium' color={semantic_colors.content.primary}>
              열: 목록보기 설정
            </BaseText>
          </Button>
        </ColumnViewController>
        <DataTable columns={_columns.filter(({
        isOn
      }) => isOn)} rows={rows} scroll={{
        x: 1200
      }} />
      </Stack>;
  }
}
```

### Disabled

```tsx
{
  render: () => {
    const columns = [{
      text: '상품번호',
      id: 'id',
      fixed: true,
      width: 80,
      disabled: true
    }, {
      text: '상품명',
      id: 'name',
      fixed: true,
      width: 120,
      disabled: true
    }, {
      text: '상품코드',
      id: 'code',
      cellAttributes: () => {
        return {
          style: {
            opacity: 0.8
          }
        };
      }
    }, {
      text: '등록일',
      id: 'date'
    }, {
      text: '상품가격',
      id: 'price',
      align: 'left',
      cellAlign: 'right'
    }, {
      text: '수량',
      id: 'amount'
    }];
    const [_columns, setColumns] = useState<Array<TableColumnViewType<DataType>>>((columns as Array<DataTableColumnType<DataType>>).map(column => ({
      ...column,
      width: column.width ?? 100,
      isOn: true
    })));
    return <Stack direction='column' width={900} gap={8}>
        <ColumnViewController columns={_columns} onChange={setColumns} width={250} pullsFixed>
          <Button kind='outlined_secondary' startIcon={<IconThreeBars color={semantic_colors.content.primary} />}>
            <BaseText kind='Body_13_Medium' color={semantic_colors.content.primary}>
              열: 목록보기 설정
            </BaseText>
          </Button>
        </ColumnViewController>
        <DataTable columns={_columns.filter(({
        isOn
      }) => isOn)} rows={rows} scroll={{
        x: 1200
      }} />
      </Stack>;
  }
}
```

### Max Fixed Count

```tsx
{
  render: args => {
    const {
      columns = fixedColumns,
      ...rest
    } = args;
    const [_columns, setColumns] = useState<Array<TableColumnViewType<DataType>>>((columns as Array<DataTableColumnType<DataType>>).map(column => ({
      ...column,
      width: column.width ?? 100,
      isOn: true
    })));
    return <Stack direction='column' width={900} gap={8}>
        {/* @ts-expect-error: TS2322 */}
        <ColumnViewController columns={_columns} onChange={setColumns} width={250} {...rest}>
          <Button kind='outlined_secondary' startIcon={<IconThreeBars color={semantic_colors.content.primary} />}>
            <BaseText kind='Body_13_Medium' color={semantic_colors.content.primary}>
              열: 목록보기 설정
            </BaseText>
          </Button>
        </ColumnViewController>
        <DataTable columns={_columns.filter(({
        isOn
      }) => isOn)} rows={rows} scroll={{
        x: 1200
      }} />
      </Stack>;
  },
  args: {
    maxFixedCount: 2,
    pullsFixed: true
  }
}
```

### Max Height Overflow

```tsx
{
  render: args => {
    const {
      columns = fixedColumns,
      ...rest
    } = args;
    const [_columns, setColumns] = useState<Array<TableColumnViewType<DataType>>>((columns as Array<DataTableColumnType<DataType>>).map(column => ({
      ...column,
      width: column.width ?? 100,
      isOn: true
    })));
    return <Stack direction='column' width={900} gap={8}>
        {/* @ts-expect-error: TS2322 */}
        <ColumnViewController columns={_columns} onChange={setColumns} width={250} {...rest}>
          <Button kind='outlined_secondary' startIcon={<IconThreeBars color={semantic_colors.content.primary} />}>
            <BaseText kind='Body_13_Medium' color={semantic_colors.content.primary}>
              열: 목록보기 설정
            </BaseText>
          </Button>
        </ColumnViewController>
        <DataTable columns={_columns.filter(({
        isOn
      }) => isOn)} rows={rows} scroll={{
        x: 1200
      }} />
      </Stack>;
  },
  args: {
    columns: [...fixedColumns, {
      text: '컬럼1',
      id: 'column1'
    }, {
      text: '컬럼2',
      id: 'column2'
    }, {
      text: '컬럼3',
      id: 'column3'
    }, {
      text: '컬럼4',
      id: 'column4'
    }, {
      text: '컬럼5',
      id: 'column5'
    }, {
      text: '컬럼6',
      id: 'column6'
    }, {
      text: '컬럼7',
      id: 'column7'
    }, {
      text: '컬럼8',
      id: 'column8'
    }, {
      text: '컬럼9',
      id: 'column9'
    }, {
      text: '컬럼10',
      id: 'column10'
    }] as Array<TableColumnViewType<unknown>>
  }
}
```

### No Fixed

```tsx
{
  render: args => {
    const {
      columns = fixedColumns,
      ...rest
    } = args;
    const [_columns, setColumns] = useState<Array<TableColumnViewType<DataType>>>((columns as Array<DataTableColumnType<DataType>>).map(column => ({
      ...column,
      width: column.width ?? 100,
      isOn: true
    })));
    return <Stack direction='column' width={900} gap={8}>
        {/* @ts-expect-error: TS2322 */}
        <ColumnViewController columns={_columns} onChange={setColumns} width={250} {...rest}>
          <Button kind='outlined_secondary' startIcon={<IconThreeBars color={semantic_colors.content.primary} />}>
            <BaseText kind='Body_13_Medium' color={semantic_colors.content.primary}>
              열: 목록보기 설정
            </BaseText>
          </Button>
        </ColumnViewController>
        <DataTable columns={_columns.filter(({
        isOn
      }) => isOn)} rows={rows} scroll={{
        x: 1200
      }} />
      </Stack>;
  },
  args: {
    canFixed: false
  }
}
```

### Pulls Fixed

```tsx
{
  render: args => {
    const {
      columns = fixedColumns,
      ...rest
    } = args;
    const [_columns, setColumns] = useState<Array<TableColumnViewType<DataType>>>((columns as Array<DataTableColumnType<DataType>>).map(column => ({
      ...column,
      width: column.width ?? 100,
      isOn: true
    })));
    return <Stack direction='column' width={900} gap={8}>
        {/* @ts-expect-error: TS2322 */}
        <ColumnViewController columns={_columns} onChange={setColumns} width={250} {...rest}>
          <Button kind='outlined_secondary' startIcon={<IconThreeBars color={semantic_colors.content.primary} />}>
            <BaseText kind='Body_13_Medium' color={semantic_colors.content.primary}>
              열: 목록보기 설정
            </BaseText>
          </Button>
        </ColumnViewController>
        <DataTable columns={_columns.filter(({
        isOn
      }) => isOn)} rows={rows} scroll={{
        x: 1200
      }} />
      </Stack>;
  },
  args: {
    pullsFixed: true
  }
}
```