MF
Mohammed Faruk

Popover Component - Copy this React, Tailwind Component to your project

Generate a popover as per below code: {/* Column visibility toggle */} <Popover content={ <Space direction="vertical"> {Object.keys(visibleColumns).map((column) => ( <Checkbox key={column} checked={visibleColumns[column]} onChange={() => handleColumnVisibilityChange(column)} > {column.replace('_', ' ')} </Checkbox> ))} </Space> } title="Toggle Columns" trigger="click" > {/* Column Settings */} {/* Export Button */} <Button type="primary" icon={<FileExcelOutlined />} onClick={handleExport} style={{ marginBottom: '20px', float: 'right', backgroundColor: '#107C41', borderColor: '#107C41' }} className='mx-3' > </Button> <Button icon={<SettingOutlined />} style={{ marginBottom: '20px', float: 'right' }}> </Button> </Popover>

Prompt
Component Preview

About

PopoverComponent - Create interactive popovers with smooth animations, customizable styles, and unique keys for each child, built with. View and copy code!

Share

Last updated 1 month ago