52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import { Button, TextField, Stack } from "@mui/material";
|
|
import FileUploadIcon from "@mui/icons-material/FileUpload";
|
|
import AdvancedSearch from "../AdvancedSearch/AdvancedSearch";
|
|
import { TABLE_SEARCH_LABELS } from "./constants";
|
|
|
|
type DataTableHeaderProps = {
|
|
extraColumns?: string[];
|
|
showExtraColumns: boolean;
|
|
onToggleExtraColumns: () => void;
|
|
onOpenExport: () => void;
|
|
};
|
|
|
|
export default function DataTableHeader({
|
|
extraColumns,
|
|
showExtraColumns,
|
|
onToggleExtraColumns,
|
|
onOpenExport,
|
|
}: DataTableHeaderProps) {
|
|
return (
|
|
<Stack
|
|
direction="row"
|
|
justifyContent="space-between"
|
|
alignItems="center"
|
|
p={2}
|
|
flexWrap="wrap"
|
|
gap={2}
|
|
>
|
|
<TextField
|
|
label="Search = To Be Implemented"
|
|
variant="outlined"
|
|
size="small"
|
|
disabled
|
|
onChange={e => console.log(`setSearchQuery(${e.target.value})`)}
|
|
sx={{ width: 300, backgroundColor: "#f0f0f0" }}
|
|
/>
|
|
<AdvancedSearch labels={TABLE_SEARCH_LABELS} />
|
|
<Button
|
|
variant="outlined"
|
|
startIcon={<FileUploadIcon />}
|
|
onClick={onOpenExport}
|
|
>
|
|
Export
|
|
</Button>
|
|
{extraColumns && extraColumns.length > 0 && (
|
|
<Button variant="outlined" onClick={onToggleExtraColumns}>
|
|
{showExtraColumns ? "Hide Extra Columns" : "Show Extra Columns"}
|
|
</Button>
|
|
)}
|
|
</Stack>
|
|
);
|
|
}
|