If you use the VirtualTable in a React TypeScript web application ESLint will throw an error when it checks the VirtuosoTableComponents.
Error: Component definition is missing display name react/display-name
The Virtuoso component uses arrow functions to declare the Scroller and TableBody. Arrow functions do not provide the displayName property used by developer tools. We can modify the component to use function definition, which automatically provides the displayName property.
The original example
const VirtuosoTableComponents: TableComponents<Data> = {
Scroller: React.forwardRef<HTMLDivElement>((props, ref) => (
<TableContainer component={Paper} {...props} ref={ref} />
)),
Table: (props) => (
<Table {...props} sx={{ borderCollapse: 'separate', tableLayout: 'fixed' }} />
),
TableHead,
TableRow: ({ item: _item, ...props }) => <TableRow {...props} />,
TableBody: React.forwardRef<HTMLTableSectionElement>((props, ref) => (
<TableBody {...props} ref={ref} />
)),
};
We need to add function definitions and return statements to replace the arrow functions with function definitions.
Replace
(props, ref) =>
with
function myFunctionName (props, ref) {
return
...
}
The corrected code
const VirtuosoTableComponents: TableComponents<Data> = {
Scroller: React.forwardRef<HTMLDivElement>( function myScroller (props, ref) {
return (
<TableContainer component={Paper} {...props} ref={ref} />
)}),
Table: (props) => (
<Table {...props} sx={{ borderCollapse: 'separate', tableLayout: 'fixed' }} />
),
TableHead,
TableRow: ({ item: _item, ...props }) => <TableRow {...props} />,
TableBody: React.forwardRef<HTMLTableSectionElement>( function myTableBody (props, ref) {
return (
<TableBody {...props} ref={ref} />
)}),
};