MUI DataGrid: manage visible rows after filtering

see also

• Add event and callback when filtered rows changes
• MUI Data Grid filtering

MUI DataGrid Column for nested object

const data = [ 
               { company: 'AAA', contact: { name: 'John Doe', email: 'john.doe@aaa.com } },
               { company: 'BBB', contact: { name: 'Mike Boh', email: 'mike.boh@bbb.com } }
             ];


const columnDefns=[
            {
                field: 'company',
                headerName: 'Company',
            },
            {
                field: 'contact',
                headerName: 'Contact',
                valueFormatter: (params) => params.contact.name
            }
            ];

see also

• Material UI datagrid with nested data

Styling React App with Emotion

• Install Emotion packages into your React App by running the command inside the React project directory:

  npm install --save @emotion/react @emotion/styled

• Add following to tsconfig.json

  {
    "compilerOptions": {
      ...
      "jsx": "react-jsx",
      "jsxImportSource": "@emotion/react",
      ...
    }
  }

• At the top of your .tsx file, insert line:

  /** @jsxImportSource @emotion/react */

see also

• TS2322: Property 'css' does not exist...
• Emotion CSS Prop and Nextjs new JSX runtime - error: pragma and pragmaFrag cannot be set when runtime is automatic
• https://mudandmoss.medium.com/solving-you-have-tried-to-stringify-object-returned-from-css-function-error-from-emotion-in-react-50b3a70ed650
• Emotion: Using both a class and the "css" method in "className" prop

Material UI DataGrid: set Footer selected count information

<DataGrid
    localeText={{
        footerRowSelected: (count) => `${count} files selected`
    }} />

See also

• React Material UI Grid footer change