Table column headers not visible when places on a Dialog

UI Components for React
Post Reply
gungors
Posts: 2
Joined: 31 May 2019, 17:23

01 Jun 2019, 15:08

The same table hides column headers when placed on a Dialog.

Am I missing something?

Thanks

User avatar
aragorn
Posts: 3619
Joined: 29 Jun 2013, 12:38

24 Jun 2019, 10:23

Hi,

I couldn't replicate it. Could you please attach a codesandbox link for us to replicate?

My test;

Code: Select all

export class DialogDemo extends Component {

    constructor() {
        super();
        this.state = { visible: false, cars: [] };
        this.onClick = this.onClick.bind(this);
        this.carservice = new CarService();
        this.onHide = this.onHide.bind(this);
    }

    componentDidMount() {
        this.carservice.getCarsSmall().then(data => this.setState({ cars: data })); // dummy data
    }

    onClick() {
        this.setState({ visible: true });
    }

    onHide() {
        this.setState({ visible: false });
    }

    render() {
        return (
            <div>
                <Dialog header="DataTable Test" visible={this.state.visible} style={{ width: '50vw' }} onHide={this.onHide}>
                    <DataTable value={this.state.cars}>
                        <Column field="vin" header="Vin" />
                        <Column field="year" header="Year" />
                        <Column field="brand" header="Brand" />
                        <Column field="color" header="Color" />
                    </DataTable>
                </Dialog>

                <Button label="Show" icon="pi pi-external-link" onClick={this.onClick} />
            </div>
        )
    }
}

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests