feat(toolbar): add column visibility and CSV export features
- 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
This commit is contained in:
45
src/Griddy/features/toolbar/GridToolbar.tsx
Normal file
45
src/Griddy/features/toolbar/GridToolbar.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user