Table column headers not visible when places on a Dialog

[gungors]

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

Am I missing something?

Thanks

[mert.sincan]

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>
        )
    }
}