If you use a Input component inside a DataGridHeaderCell component, you cannot type ‘spaces’. If you remove the wrapping DataGridHeaderCell it works.
Can I get this to work while using DataGridHeaderCell? (see line 138 in both code examples to spot the difference)
Repro:
Doesn’t block space
<code>import logo from './logo.svg';
import './App.css';
import axios from 'axios';
import * as Models from './models/tables'
import _ from 'lodash';
import React, { useEffect, useState } from 'react';
import {
FolderRegular,
EditRegular,
OpenRegular,
DocumentRegular,
PeopleRegular,
DocumentPdfRegular,
VideoRegular,
PaddingDown20Filled,
} from "@fluentui/react-icons";
import {
PresenceBadgeStatus,
Avatar,
DataGridBody,
DataGridRow,
DataGrid,
DataGridHeader,
DataGridHeaderCell,
DataGridCell,
TableCellLayout,
TableColumnDefinition,
createTableColumn, Button, FluentProvider, webLightTheme, makeStyles, tokens, Title1,
webDarkTheme,
makeStaticStyles,
mergeClasses,
Title3,
Input
} from '@fluentui/react-components';
const useStaticStyles = makeStaticStyles({
'html, body, #root': {
height: '100%',
width: '100%',
margin: '0',
padding: '0'
}
});
const useStyles = makeStyles({
outerContainer: {
height: '100%',
display: 'flex',
flexDirection: 'column',
gap: tokens.spacingHorizontalXXXL,
padding: tokens.spacingHorizontalXXXL,
backgroundColor: tokens.colorBrandBackground2
},
container: {
display: 'flex',
flexDirection: 'column',
},
gapM: {
gap: tokens.spacingHorizontalM
},
row: {
display: 'flex',
justifyContent: 'space-between'
},
paddingM: {
padding: tokens.spacingHorizontalM
},
dataGrid: {
backgroundColor: tokens.colorBrandBackground2Hover
},
datagridHeader: {
borderBottomWidth: 0,
padding: tokens.spacingHorizontalM,
fontSize: tokens.fontSizeBase600
},
datagridRow: {
borderBottomWidth: 0,
paddingTop: tokens.spacingHorizontalXS,
paddingBottom: tokens.spacingHorizontalXS,
paddingLeft: tokens.spacingHorizontalM,
paddingRight: tokens.spacingHorizontalM,
fontSize: tokens.fontSizeBase400,
backgroundColor: tokens.colorNeutralBackground6
},
buttonRow: {
display: 'flex',
justifyContent: 'space-between',
},
shadowBox: {
display: 'flex',
flexDirection: 'column',
boxShadow: tokens.shadow2,
gap: tokens.spacingHorizontalXXXL,
padding: tokens.spacingHorizontalXXXL
},
});
function App() {
const [data, setData] = useState<Models.Item[]>([]);
const [itemCount, setItemCount] = useState<number>(0);
const [itemFilterString, setItemFilterString] = useState<string>('');
const columns: TableColumnDefinition<Models.Item>[] = [
createTableColumn<Models.Item>({
columnId: "item",
renderHeaderCell: () => {
return (
<div className={mergeClasses(classes.container, classes.gapM)}>
<Title3>Item</Title3>
<Input appearance='underline' placeholder='Filter' onChange={(ev, data) => {
setItemFilterString(data.value);
}}></Input>
</div>
);
},
renderCell: (item: Models.Item) => {
return (
<TableCellLayout>
{item.ItemName}
</TableCellLayout>
);
}
})];
const classes = useStyles();
useStaticStyles();
return (
<FluentProvider theme={webDarkTheme} className={mergeClasses(classes.outerContainer)}>
<input type='text' ></input>
<div className={classes.container}>
<DataGrid sortable={false} columns={columns} items={data} className={classes.dataGrid}>
<DataGridHeader>
<DataGridRow className={classes.datagridHeader}>
{({ renderHeaderCell }) => renderHeaderCell()}
</DataGridRow>
</DataGridHeader>
<DataGridBody<Models.Item>>
{({ item, rowId }) => (
<DataGridRow<Models.Item> className={classes.datagridRow}>
{({ renderCell }) => (
<DataGridCell>{renderCell(item)}</DataGridCell>
)}
</DataGridRow>
)}
</DataGridBody>
</DataGrid>
</div>
</FluentProvider >
);
}
export default App;
</code>
<code>import logo from './logo.svg';
import './App.css';
import axios from 'axios';
import * as Models from './models/tables'
import _ from 'lodash';
import React, { useEffect, useState } from 'react';
import {
FolderRegular,
EditRegular,
OpenRegular,
DocumentRegular,
PeopleRegular,
DocumentPdfRegular,
VideoRegular,
PaddingDown20Filled,
} from "@fluentui/react-icons";
import {
PresenceBadgeStatus,
Avatar,
DataGridBody,
DataGridRow,
DataGrid,
DataGridHeader,
DataGridHeaderCell,
DataGridCell,
TableCellLayout,
TableColumnDefinition,
createTableColumn, Button, FluentProvider, webLightTheme, makeStyles, tokens, Title1,
webDarkTheme,
makeStaticStyles,
mergeClasses,
Title3,
Input
} from '@fluentui/react-components';
const useStaticStyles = makeStaticStyles({
'html, body, #root': {
height: '100%',
width: '100%',
margin: '0',
padding: '0'
}
});
const useStyles = makeStyles({
outerContainer: {
height: '100%',
display: 'flex',
flexDirection: 'column',
gap: tokens.spacingHorizontalXXXL,
padding: tokens.spacingHorizontalXXXL,
backgroundColor: tokens.colorBrandBackground2
},
container: {
display: 'flex',
flexDirection: 'column',
},
gapM: {
gap: tokens.spacingHorizontalM
},
row: {
display: 'flex',
justifyContent: 'space-between'
},
paddingM: {
padding: tokens.spacingHorizontalM
},
dataGrid: {
backgroundColor: tokens.colorBrandBackground2Hover
},
datagridHeader: {
borderBottomWidth: 0,
padding: tokens.spacingHorizontalM,
fontSize: tokens.fontSizeBase600
},
datagridRow: {
borderBottomWidth: 0,
paddingTop: tokens.spacingHorizontalXS,
paddingBottom: tokens.spacingHorizontalXS,
paddingLeft: tokens.spacingHorizontalM,
paddingRight: tokens.spacingHorizontalM,
fontSize: tokens.fontSizeBase400,
backgroundColor: tokens.colorNeutralBackground6
},
buttonRow: {
display: 'flex',
justifyContent: 'space-between',
},
shadowBox: {
display: 'flex',
flexDirection: 'column',
boxShadow: tokens.shadow2,
gap: tokens.spacingHorizontalXXXL,
padding: tokens.spacingHorizontalXXXL
},
});
function App() {
const [data, setData] = useState<Models.Item[]>([]);
const [itemCount, setItemCount] = useState<number>(0);
const [itemFilterString, setItemFilterString] = useState<string>('');
const columns: TableColumnDefinition<Models.Item>[] = [
createTableColumn<Models.Item>({
columnId: "item",
renderHeaderCell: () => {
return (
<div className={mergeClasses(classes.container, classes.gapM)}>
<Title3>Item</Title3>
<Input appearance='underline' placeholder='Filter' onChange={(ev, data) => {
setItemFilterString(data.value);
}}></Input>
</div>
);
},
renderCell: (item: Models.Item) => {
return (
<TableCellLayout>
{item.ItemName}
</TableCellLayout>
);
}
})];
const classes = useStyles();
useStaticStyles();
return (
<FluentProvider theme={webDarkTheme} className={mergeClasses(classes.outerContainer)}>
<input type='text' ></input>
<div className={classes.container}>
<DataGrid sortable={false} columns={columns} items={data} className={classes.dataGrid}>
<DataGridHeader>
<DataGridRow className={classes.datagridHeader}>
{({ renderHeaderCell }) => renderHeaderCell()}
</DataGridRow>
</DataGridHeader>
<DataGridBody<Models.Item>>
{({ item, rowId }) => (
<DataGridRow<Models.Item> className={classes.datagridRow}>
{({ renderCell }) => (
<DataGridCell>{renderCell(item)}</DataGridCell>
)}
</DataGridRow>
)}
</DataGridBody>
</DataGrid>
</div>
</FluentProvider >
);
}
export default App;
</code>
import logo from './logo.svg';
import './App.css';
import axios from 'axios';
import * as Models from './models/tables'
import _ from 'lodash';
import React, { useEffect, useState } from 'react';
import {
FolderRegular,
EditRegular,
OpenRegular,
DocumentRegular,
PeopleRegular,
DocumentPdfRegular,
VideoRegular,
PaddingDown20Filled,
} from "@fluentui/react-icons";
import {
PresenceBadgeStatus,
Avatar,
DataGridBody,
DataGridRow,
DataGrid,
DataGridHeader,
DataGridHeaderCell,
DataGridCell,
TableCellLayout,
TableColumnDefinition,
createTableColumn, Button, FluentProvider, webLightTheme, makeStyles, tokens, Title1,
webDarkTheme,
makeStaticStyles,
mergeClasses,
Title3,
Input
} from '@fluentui/react-components';
const useStaticStyles = makeStaticStyles({
'html, body, #root': {
height: '100%',
width: '100%',
margin: '0',
padding: '0'
}
});
const useStyles = makeStyles({
outerContainer: {
height: '100%',
display: 'flex',
flexDirection: 'column',
gap: tokens.spacingHorizontalXXXL,
padding: tokens.spacingHorizontalXXXL,
backgroundColor: tokens.colorBrandBackground2
},
container: {
display: 'flex',
flexDirection: 'column',
},
gapM: {
gap: tokens.spacingHorizontalM
},
row: {
display: 'flex',
justifyContent: 'space-between'
},
paddingM: {
padding: tokens.spacingHorizontalM
},
dataGrid: {
backgroundColor: tokens.colorBrandBackground2Hover
},
datagridHeader: {
borderBottomWidth: 0,
padding: tokens.spacingHorizontalM,
fontSize: tokens.fontSizeBase600
},
datagridRow: {
borderBottomWidth: 0,
paddingTop: tokens.spacingHorizontalXS,
paddingBottom: tokens.spacingHorizontalXS,
paddingLeft: tokens.spacingHorizontalM,
paddingRight: tokens.spacingHorizontalM,
fontSize: tokens.fontSizeBase400,
backgroundColor: tokens.colorNeutralBackground6
},
buttonRow: {
display: 'flex',
justifyContent: 'space-between',
},
shadowBox: {
display: 'flex',
flexDirection: 'column',
boxShadow: tokens.shadow2,
gap: tokens.spacingHorizontalXXXL,
padding: tokens.spacingHorizontalXXXL
},
});
function App() {
const [data, setData] = useState<Models.Item[]>([]);
const [itemCount, setItemCount] = useState<number>(0);
const [itemFilterString, setItemFilterString] = useState<string>('');
const columns: TableColumnDefinition<Models.Item>[] = [
createTableColumn<Models.Item>({
columnId: "item",
renderHeaderCell: () => {
return (
<div className={mergeClasses(classes.container, classes.gapM)}>
<Title3>Item</Title3>
<Input appearance='underline' placeholder='Filter' onChange={(ev, data) => {
setItemFilterString(data.value);
}}></Input>
</div>
);
},
renderCell: (item: Models.Item) => {
return (
<TableCellLayout>
{item.ItemName}
</TableCellLayout>
);
}
})];
const classes = useStyles();
useStaticStyles();
return (
<FluentProvider theme={webDarkTheme} className={mergeClasses(classes.outerContainer)}>
<input type='text' ></input>
<div className={classes.container}>
<DataGrid sortable={false} columns={columns} items={data} className={classes.dataGrid}>
<DataGridHeader>
<DataGridRow className={classes.datagridHeader}>
{({ renderHeaderCell }) => renderHeaderCell()}
</DataGridRow>
</DataGridHeader>
<DataGridBody<Models.Item>>
{({ item, rowId }) => (
<DataGridRow<Models.Item> className={classes.datagridRow}>
{({ renderCell }) => (
<DataGridCell>{renderCell(item)}</DataGridCell>
)}
</DataGridRow>
)}
</DataGridBody>
</DataGrid>
</div>
</FluentProvider >
);
}
export default App;
Blocks space
<code>import logo from './logo.svg';
import './App.css';
import axios from 'axios';
import * as Models from './models/tables'
import _ from 'lodash';
import React, { useEffect, useState } from 'react';
import {
FolderRegular,
EditRegular,
OpenRegular,
DocumentRegular,
PeopleRegular,
DocumentPdfRegular,
VideoRegular,
PaddingDown20Filled,
} from "@fluentui/react-icons";
import {
PresenceBadgeStatus,
Avatar,
DataGridBody,
DataGridRow,
DataGrid,
DataGridHeader,
DataGridHeaderCell,
DataGridCell,
TableCellLayout,
TableColumnDefinition,
createTableColumn, Button, FluentProvider, webLightTheme, makeStyles, tokens, Title1,
webDarkTheme,
makeStaticStyles,
mergeClasses,
Title3,
Input
} from '@fluentui/react-components';
const useStaticStyles = makeStaticStyles({
'html, body, #root': {
height: '100%',
width: '100%',
margin: '0',
padding: '0'
}
});
const useStyles = makeStyles({
outerContainer: {
height: '100%',
display: 'flex',
flexDirection: 'column',
gap: tokens.spacingHorizontalXXXL,
padding: tokens.spacingHorizontalXXXL,
backgroundColor: tokens.colorBrandBackground2
},
container: {
display: 'flex',
flexDirection: 'column',
},
gapM: {
gap: tokens.spacingHorizontalM
},
row: {
display: 'flex',
justifyContent: 'space-between'
},
paddingM: {
padding: tokens.spacingHorizontalM
},
dataGrid: {
backgroundColor: tokens.colorBrandBackground2Hover
},
datagridHeader: {
borderBottomWidth: 0,
padding: tokens.spacingHorizontalM,
fontSize: tokens.fontSizeBase600
},
datagridRow: {
borderBottomWidth: 0,
paddingTop: tokens.spacingHorizontalXS,
paddingBottom: tokens.spacingHorizontalXS,
paddingLeft: tokens.spacingHorizontalM,
paddingRight: tokens.spacingHorizontalM,
fontSize: tokens.fontSizeBase400,
backgroundColor: tokens.colorNeutralBackground6
},
buttonRow: {
display: 'flex',
justifyContent: 'space-between',
},
shadowBox: {
display: 'flex',
flexDirection: 'column',
boxShadow: tokens.shadow2,
gap: tokens.spacingHorizontalXXXL,
padding: tokens.spacingHorizontalXXXL
},
});
function App() {
const [data, setData] = useState<Models.Item[]>([]);
const [itemCount, setItemCount] = useState<number>(0);
const [itemFilterString, setItemFilterString] = useState<string>('');
const columns: TableColumnDefinition<Models.Item>[] = [
createTableColumn<Models.Item>({
columnId: "item",
renderHeaderCell: () => {
return (
<div className={mergeClasses(classes.container, classes.gapM)}>
<Title3>Item</Title3>
<Input appearance='underline' placeholder='Filter' onChange={(ev, data) => {
setItemFilterString(data.value);
}}></Input>
</div>
);
},
renderCell: (item: Models.Item) => {
return (
<TableCellLayout>
{item.ItemName}
</TableCellLayout>
);
}
})];
const classes = useStyles();
useStaticStyles();
return (
<FluentProvider theme={webDarkTheme} className={mergeClasses(classes.outerContainer)}>
<input type='text' ></input>
<div className={classes.container}>
<DataGrid sortable={false} columns={columns} items={data} className={classes.dataGrid}>
<DataGridHeader>
<DataGridRow className={classes.datagridHeader}>
{({ renderHeaderCell }) => renderHeaderCell()}
</DataGridRow>
</DataGridHeader>
<DataGridBody<Models.Item>>
{({ item, rowId }) => (
<DataGridRow<Models.Item> className={classes.datagridRow}>
{({ renderCell }) => (
<DataGridCell>{renderCell(item)}</DataGridCell>
)}
</DataGridRow>
)}
</DataGridBody>
</DataGrid>
</div>
</FluentProvider >
);
}
export default App;
</code>
<code>import logo from './logo.svg';
import './App.css';
import axios from 'axios';
import * as Models from './models/tables'
import _ from 'lodash';
import React, { useEffect, useState } from 'react';
import {
FolderRegular,
EditRegular,
OpenRegular,
DocumentRegular,
PeopleRegular,
DocumentPdfRegular,
VideoRegular,
PaddingDown20Filled,
} from "@fluentui/react-icons";
import {
PresenceBadgeStatus,
Avatar,
DataGridBody,
DataGridRow,
DataGrid,
DataGridHeader,
DataGridHeaderCell,
DataGridCell,
TableCellLayout,
TableColumnDefinition,
createTableColumn, Button, FluentProvider, webLightTheme, makeStyles, tokens, Title1,
webDarkTheme,
makeStaticStyles,
mergeClasses,
Title3,
Input
} from '@fluentui/react-components';
const useStaticStyles = makeStaticStyles({
'html, body, #root': {
height: '100%',
width: '100%',
margin: '0',
padding: '0'
}
});
const useStyles = makeStyles({
outerContainer: {
height: '100%',
display: 'flex',
flexDirection: 'column',
gap: tokens.spacingHorizontalXXXL,
padding: tokens.spacingHorizontalXXXL,
backgroundColor: tokens.colorBrandBackground2
},
container: {
display: 'flex',
flexDirection: 'column',
},
gapM: {
gap: tokens.spacingHorizontalM
},
row: {
display: 'flex',
justifyContent: 'space-between'
},
paddingM: {
padding: tokens.spacingHorizontalM
},
dataGrid: {
backgroundColor: tokens.colorBrandBackground2Hover
},
datagridHeader: {
borderBottomWidth: 0,
padding: tokens.spacingHorizontalM,
fontSize: tokens.fontSizeBase600
},
datagridRow: {
borderBottomWidth: 0,
paddingTop: tokens.spacingHorizontalXS,
paddingBottom: tokens.spacingHorizontalXS,
paddingLeft: tokens.spacingHorizontalM,
paddingRight: tokens.spacingHorizontalM,
fontSize: tokens.fontSizeBase400,
backgroundColor: tokens.colorNeutralBackground6
},
buttonRow: {
display: 'flex',
justifyContent: 'space-between',
},
shadowBox: {
display: 'flex',
flexDirection: 'column',
boxShadow: tokens.shadow2,
gap: tokens.spacingHorizontalXXXL,
padding: tokens.spacingHorizontalXXXL
},
});
function App() {
const [data, setData] = useState<Models.Item[]>([]);
const [itemCount, setItemCount] = useState<number>(0);
const [itemFilterString, setItemFilterString] = useState<string>('');
const columns: TableColumnDefinition<Models.Item>[] = [
createTableColumn<Models.Item>({
columnId: "item",
renderHeaderCell: () => {
return (
<div className={mergeClasses(classes.container, classes.gapM)}>
<Title3>Item</Title3>
<Input appearance='underline' placeholder='Filter' onChange={(ev, data) => {
setItemFilterString(data.value);
}}></Input>
</div>
);
},
renderCell: (item: Models.Item) => {
return (
<TableCellLayout>
{item.ItemName}
</TableCellLayout>
);
}
})];
const classes = useStyles();
useStaticStyles();
return (
<FluentProvider theme={webDarkTheme} className={mergeClasses(classes.outerContainer)}>
<input type='text' ></input>
<div className={classes.container}>
<DataGrid sortable={false} columns={columns} items={data} className={classes.dataGrid}>
<DataGridHeader>
<DataGridRow className={classes.datagridHeader}>
{({ renderHeaderCell }) => renderHeaderCell()}
</DataGridRow>
</DataGridHeader>
<DataGridBody<Models.Item>>
{({ item, rowId }) => (
<DataGridRow<Models.Item> className={classes.datagridRow}>
{({ renderCell }) => (
<DataGridCell>{renderCell(item)}</DataGridCell>
)}
</DataGridRow>
)}
</DataGridBody>
</DataGrid>
</div>
</FluentProvider >
);
}
export default App;
</code>
import logo from './logo.svg';
import './App.css';
import axios from 'axios';
import * as Models from './models/tables'
import _ from 'lodash';
import React, { useEffect, useState } from 'react';
import {
FolderRegular,
EditRegular,
OpenRegular,
DocumentRegular,
PeopleRegular,
DocumentPdfRegular,
VideoRegular,
PaddingDown20Filled,
} from "@fluentui/react-icons";
import {
PresenceBadgeStatus,
Avatar,
DataGridBody,
DataGridRow,
DataGrid,
DataGridHeader,
DataGridHeaderCell,
DataGridCell,
TableCellLayout,
TableColumnDefinition,
createTableColumn, Button, FluentProvider, webLightTheme, makeStyles, tokens, Title1,
webDarkTheme,
makeStaticStyles,
mergeClasses,
Title3,
Input
} from '@fluentui/react-components';
const useStaticStyles = makeStaticStyles({
'html, body, #root': {
height: '100%',
width: '100%',
margin: '0',
padding: '0'
}
});
const useStyles = makeStyles({
outerContainer: {
height: '100%',
display: 'flex',
flexDirection: 'column',
gap: tokens.spacingHorizontalXXXL,
padding: tokens.spacingHorizontalXXXL,
backgroundColor: tokens.colorBrandBackground2
},
container: {
display: 'flex',
flexDirection: 'column',
},
gapM: {
gap: tokens.spacingHorizontalM
},
row: {
display: 'flex',
justifyContent: 'space-between'
},
paddingM: {
padding: tokens.spacingHorizontalM
},
dataGrid: {
backgroundColor: tokens.colorBrandBackground2Hover
},
datagridHeader: {
borderBottomWidth: 0,
padding: tokens.spacingHorizontalM,
fontSize: tokens.fontSizeBase600
},
datagridRow: {
borderBottomWidth: 0,
paddingTop: tokens.spacingHorizontalXS,
paddingBottom: tokens.spacingHorizontalXS,
paddingLeft: tokens.spacingHorizontalM,
paddingRight: tokens.spacingHorizontalM,
fontSize: tokens.fontSizeBase400,
backgroundColor: tokens.colorNeutralBackground6
},
buttonRow: {
display: 'flex',
justifyContent: 'space-between',
},
shadowBox: {
display: 'flex',
flexDirection: 'column',
boxShadow: tokens.shadow2,
gap: tokens.spacingHorizontalXXXL,
padding: tokens.spacingHorizontalXXXL
},
});
function App() {
const [data, setData] = useState<Models.Item[]>([]);
const [itemCount, setItemCount] = useState<number>(0);
const [itemFilterString, setItemFilterString] = useState<string>('');
const columns: TableColumnDefinition<Models.Item>[] = [
createTableColumn<Models.Item>({
columnId: "item",
renderHeaderCell: () => {
return (
<div className={mergeClasses(classes.container, classes.gapM)}>
<Title3>Item</Title3>
<Input appearance='underline' placeholder='Filter' onChange={(ev, data) => {
setItemFilterString(data.value);
}}></Input>
</div>
);
},
renderCell: (item: Models.Item) => {
return (
<TableCellLayout>
{item.ItemName}
</TableCellLayout>
);
}
})];
const classes = useStyles();
useStaticStyles();
return (
<FluentProvider theme={webDarkTheme} className={mergeClasses(classes.outerContainer)}>
<input type='text' ></input>
<div className={classes.container}>
<DataGrid sortable={false} columns={columns} items={data} className={classes.dataGrid}>
<DataGridHeader>
<DataGridRow className={classes.datagridHeader}>
{({ renderHeaderCell }) => renderHeaderCell()}
</DataGridRow>
</DataGridHeader>
<DataGridBody<Models.Item>>
{({ item, rowId }) => (
<DataGridRow<Models.Item> className={classes.datagridRow}>
{({ renderCell }) => (
<DataGridCell>{renderCell(item)}</DataGridCell>
)}
</DataGridRow>
)}
</DataGridBody>
</DataGrid>
</div>
</FluentProvider >
);
}
export default App;
Thanks,
Frank