# wp-ultimate-post-grid/4.0.1/assets/js/admin-manage/general/SelectColumns.js

WP Ultimate Post Grid, version 4.0.1. 42 lines.

- Page: https://pluginprobe.com/plugins/wp-ultimate-post-grid/4.0.1/code/assets/js/admin-manage/general/SelectColumns.js
- Raw: https://pluginprobe.com/plugins/wp-ultimate-post-grid/4.0.1/raw/assets/js/admin-manage/general/SelectColumns.js
- Modified: 2020-01-24T07:47:12+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/wp-ultimate-post-grid/4.0.1/code/assets/js/admin-manage/general/SelectColumns.js#L10-L20`.

```javascript
import React from 'react';

import { __wpupg } from 'Shared/Translations';

import '../../../css/admin/manage/select-columns.scss';
 
const SelectColumns = (props) => {
    return (
        <div className="wpupg-admin-manage-select-columns-container">
            <div className="wpupg-admin-manage-select-columns">
            {
                props.columns.map( (column, index) => {
                    if ( 'actions' === column.id ) {
                        return null;
                    }

                    const selected = props.selectedColumns.includes(column.id);
                    const filtered = props.filteredColumns.includes(column.id);

                    let classNames = ['wpupg-admin-manage-select-columns-column'];
                    if ( selected ) { classNames.push( 'wpupg-admin-manage-select-columns-column-selected' ) }
                    if ( filtered ) { classNames.push( 'wpupg-admin-manage-select-columns-column-filtered' ) }

                    return (
                        <span
                            className={ classNames.join( ' ' ) }
                            onClick={(e) => {
                                e.preventDefault();
                                if ( ! filtered ) {
                                    props.onColumnsChange( column.id, ! selected );
                                }
                            }}
                            key={index}
                        >{ column.Header }</span>
                    );
                })
            }
            </div>
        </div>
    );
}
export default SelectColumns;
```