Hein
ad325d94a9
- Implemented GridToolbar component for column visibility and CSV export - Added ColumnVisibilityMenu for toggling column visibility - Created exportToCsv function for exporting visible data to CSV - Updated Griddy component to integrate toolbar functionality - Enhanced documentation with examples for new features
46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import type { Table } from '@tanstack/react-table'
|
|
|
|
import { ActionIcon, Group } from '@mantine/core'
|
|
import { IconDownload } from '@tabler/icons-react'
|
|
|
|
import { ColumnVisibilityMenu } from '../columnVisibility'
|
|
import { exportToCsv } from '../export'
|
|
|
|
interface GridToolbarProps<T> {
|
|
exportFilename?: string
|
|
showColumnToggle?: boolean
|
|
showExport?: boolean
|
|
table: Table<T>
|
|
}
|
|
|
|
export function GridToolbar<T>({
|
|
exportFilename = 'export.csv',
|
|
showColumnToggle = true,
|
|
showExport = true,
|
|
table,
|
|
}: GridToolbarProps<T>) {
|
|
const handleExport = () => {
|
|
exportToCsv(table, exportFilename)
|
|
}
|
|
|
|
if (!showExport && !showColumnToggle) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<Group gap="xs" justify="flex-end" p="xs" style={{ borderBottom: '1px solid #e0e0e0' }}>
|
|
{showExport && (
|
|
<ActionIcon
|
|
aria-label="Export to CSV"
|
|
onClick={handleExport}
|
|
size="sm"
|
|
variant="subtle"
|
|
>
|
|
<IconDownload size={16} />
|
|
</ActionIcon>
|
|
)}
|
|
{showColumnToggle && <ColumnVisibilityMenu table={table} />}
|
|
</Group>
|
|
)
|
|
}
|