DataGrid

Takes a list of entities, a model, and renders a table. The model displays the raw value unles you pass it a Component The model support custom menu for table header

Example usage (uncontrolled single selection)

First name	Name	Age
Valid Data Lorem ipsum dolor sit amet View original Search for similar	bar	123
Valid Data Lorem ipsum dolor sit amet View original Search for similar	foo	123
Valid Data Lorem ipsum dolor sit amet View original Search for similar	fob	123
Valid Data Lorem ipsum dolor sit amet View original Search for similar	mar	123
Valid Data Lorem ipsum dolor sit amet View original Search for similar	vrn	123

<ThemeProvider>
  <DataGrid
    useSmartOverflowX
    resizable
    reorderable
    propertyKey="name"
    selectable
    onInvertSelection={selected => {
      console.log('datagrid.mdx onInvertSelection', selected)
    }}
    onSelectionChange={(isSelected, entityId, selected) => {
      console.log(
        'isSelected, entityId, selected',
        isSelected,
        entityId,
        selected,
      )
    }}
    onSelectAllChange={selectAllChecked => {
      console.log('selectAllChecked', selectAllChecked)
    }}
    model={[
      {
        property: 'firstName',
        displayName: 'First name',
        CellDetail: entity => {
          return (
            <div style={{ padding: '16px' }}>
              <h4>Valid Data</h4>
              <p>Lorem ipsum dolor sit amet</p>
              <Flex style={{ justifyContent: 'flex-start', margin: '8px 0' }}>
                <Circle style={{ margin: '0 8px' }} />
                <Circle style={{ margin: '0 8px' }} />
              </Flex>
              <div>
                <a href="#">View original</a>
              </div>
              <div>
                <a href="#">Search for similar</a>
              </div>
            </div>
          )
        },
        // Component,
        menuDescriptor: [
          {
            label: 'foo',
            icon: <Circle />,
            onClick: () => {
              console.log('foo')
            },
            children: [
              {
                label: 'bar',
                icon: <Circle />,
                onClick: () => {
                  console.log('foo>bar')
                },
              },
              {
                label: 'foo',
                icon: <Circle />,
                onClick: () => {
                  console.log('foo>bar')
                },
                children: [
                  {
                    label: 'bar',
                    icon: <Circle />,
                    onClick: () => {
                      console.log('foo>bar')
                    },
                  },
                  {
                    label: 'foo',
                    icon: <Circle />,
                    onClick: () => {
                      console.log('foo>bar')
                    },
                  },
                ],
              },
            ],
          },
          {
            label: 'bar',
            icon: <Circle />,
            onClick: () => {
              console.log('foo')
            },
          },
        ],
      },
      // { property: 'name', displayName: 'Name', menu: <ButtonMenu button={'≡'}>yooooo</ButtonMenu> },
      {
        property: 'name',
        displayName: 'Name',
        menu: (
          <Flex style={{ padding: '8px', marginLeft: 'auto' }}>
            <Star />
          </Flex>
        ),
      },
      {
        property: 'age',
        displayName: 'Age',
        menuDescriptor: [
          {
            label: 'foo',
            icon: <Circle />,
            onClick: () => {
              console.log('foo')
            },
            children: [
              {
                label: 'bar',
                icon: <Circle />,
                onClick: () => {
                  console.log('foo>bar')
                },
              },
            ],
            // type: ,
            // Link: ,
            // to: ,
            // href: ,
            // target: ,
            // isFullWidth: ,
          },
        ],
      },
    ]}
    data={[
      { age: 123, firstName: 'foozefv ojnzfkgjnbzjrnvzoekrjnv', name: 'bar' },
      {
        age: 123,
        firstName: 'baz kzejfnvlskngd bl lknf lkzfn g',
        name: 'foo',
      },
      { age: 123, firstName: 'fuz', name: 'fob' },
      { age: 123, firstName: 'voo', name: 'mar' },
      {
        age: 123,
        firstName: 'boplkznfknlfjgnkjnzfjkleznlfnzekjrfnkzenrkzejrnkzejrnf',
        name: 'vrn',
      },
    ]}
  />
</ThemeProvider>

<ThemeProvider>
  <DataGrid
    useSmartOverflowX
    resizable
    reorderable
    propertyKey="name"
    selectable
    onInvertSelection={selected => {
      console.log('datagrid.mdx onInvertSelection', selected)
    }}
    onSelectionChange={(isSelected, entityId, selected) => {
      console.log(
        'isSelected, entityId, selected',
        isSelected,
        entityId,
        selected,
      )
    }}
    onSelectAllChange={selectAllChecked => {
      console.log('selectAllChecked', selectAllChecked)
    }}
    model={[
      {
        property: 'firstName',
        displayName: 'First name',
        CellDetail: entity => {
          return (
            <div style={{ padding: '16px' }}>
              <h4>Valid Data</h4>
              <p>Lorem ipsum dolor sit amet</p>
              <Flex style={{ justifyContent: 'flex-start', margin: '8px 0' }}>
                <Circle style={{ margin: '0 8px' }} />
                <Circle style={{ margin: '0 8px' }} />
              </Flex>
              <div>
                <a href="#">View original</a>
              </div>
              <div>
                <a href="#">Search for similar</a>
              </div>
            </div>
          )
        },
        // Component,
        menuDescriptor: [
          {
            label: 'foo',
            icon: <Circle />,
            onClick: () => {
              console.log('foo')
            },
            children: [
              {
                label: 'bar',
                icon: <Circle />,
                onClick: () => {
                  console.log('foo>bar')
                },
              },
              {
                label: 'foo',
                icon: <Circle />,
                onClick: () => {
                  console.log('foo>bar')
                },
                children: [
                  {
                    label: 'bar',
                    icon: <Circle />,
                    onClick: () => {
                      console.log('foo>bar')
                    },
                  },
                  {
                    label: 'foo',
                    icon: <Circle />,
                    onClick: () => {
                      console.log('foo>bar')
                    },
                  },
                ],
              },
            ],
          },
          {
            label: 'bar',
            icon: <Circle />,
            onClick: () => {
              console.log('foo')
            },
          },
        ],
      },
      // { property: 'name', displayName: 'Name', menu: <ButtonMenu button={'≡'}>yooooo</ButtonMenu> },
      {
        property: 'name',
        displayName: 'Name',
        menu: (
          <Flex style={{ padding: '8px', marginLeft: 'auto' }}>
            <Star />
          </Flex>
        ),
      },
      {
        property: 'age',
        displayName: 'Age',
        menuDescriptor: [
          {
            label: 'foo',
            icon: <Circle />,
            onClick: () => {
              console.log('foo')
            },
            children: [
              {
                label: 'bar',
                icon: <Circle />,
                onClick: () => {
                  console.log('foo>bar')
                },
              },
            ],
            // type: ,
            // Link: ,
            // to: ,
            // href: ,
            // target: ,
            // isFullWidth: ,
          },
        ],
      },
    ]}
    data={[
      { age: 123, firstName: 'foozefv ojnzfkgjnbzjrnvzoekrjnv', name: 'bar' },
      {
        age: 123,
        firstName: 'baz kzejfnvlskngd bl lknf lkzfn g',
        name: 'foo',
      },
      { age: 123, firstName: 'fuz', name: 'fob' },
      { age: 123, firstName: 'voo', name: 'mar' },
      {
        age: 123,
        firstName: 'boplkznfknlfjgnkjnzfjkleznlfnzekjrfnkzenrkzejrnkzejrnf',
        name: 'vrn',
      },
    ]}
  />
</ThemeProvider>

Example usage (controlled selection)

First name	Name	Age
Valid Data Lorem ipsum dolor sit amet View original Search for similar	bar	123
Valid Data Lorem ipsum dolor sit amet View original Search for similar	foo	123
Valid Data Lorem ipsum dolor sit amet View original Search for similar	fob	123
Valid Data Lorem ipsum dolor sit amet View original Search for similar	mar	123
Valid Data Lorem ipsum dolor sit amet View original Search for similar	vrn	123

<ThemeProvider>
  <WithState
    defaultState={{
      selected: ['bar', 'vrn'],
      sortDirections: [
        { property: 'name' },
        { property: 'firstName', sortDirection: 'ASC' },
      ],
    }}
  >
    {(state, setState) => (
      <DataGrid
        useSmartOverflowX
        resizable
        reorderable
        propertyKey="name"
        selectable
        multiSelectable
        selected={state.selected}
        onInvertSelection={selected => {
          console.log('datagrid.mdx onInvertSelection', selected)
          setState({ ...state, selected })
        }}
        onSelectionChange={(isSelected, entityId, selected) => {
          console.log(
            'isSelected, entityId, selected',
            isSelected,
            entityId,
            selected,
          )
          setState({ ...state, selected })
        }}
        onSelectAllChange={selectAllChecked => {
          console.log('selectAllChecked', selectAllChecked)
          setState({
            ...state,
            selected: selectAllChecked
              ? [
                  { age: 123, firstName: 'foo', name: 'bar' },
                  { age: 123, firstName: 'baz', name: 'foo' },
                  { age: 123, firstName: 'fuz', name: 'fob' },
                  { age: 123, firstName: 'voo', name: 'mar' },
                  { age: 123, firstName: 'bop', name: 'vrn' },
                ].map(({ name }) => name)
              : [],
          })
        }}
        model={[
          {
            property: 'firstName',
            displayName: 'First name',
            CellDetail: entity => {
              return (
                <div style={{ padding: '16px' }}>
                  <h4>Valid Data</h4>
                  <p>Lorem ipsum dolor sit amet</p>
                  <Flex
                    style={{ justifyContent: 'flex-start', margin: '8px 0' }}
                  >
                    <Circle style={{ margin: '0 8px' }} />
                    <Circle style={{ margin: '0 8px' }} />
                  </Flex>
                  <div>
                    <a href="#">View original</a>
                  </div>
                  <div>
                    <a href="#">Search for similar</a>
                  </div>
                </div>
              )
            },
            // Component,
            menuDescriptor: [
              {
                label: 'foo',
                icon: <Circle />,
                onClick: () => {
                  console.log('foo')
                },
                children: [
                  {
                    label: 'bar',
                    icon: <Circle />,
                    onClick: () => {
                      console.log('foo>bar')
                    },
                  },
                  {
                    label: 'foo',
                    icon: <Circle />,
                    onClick: () => {
                      console.log('foo>bar')
                    },
                    children: [
                      {
                        label: 'bar',
                        icon: <Circle />,
                        onClick: () => {
                          console.log('foo>bar')
                        },
                      },
                      {
                        label: 'foo',
                        icon: <Circle />,
                        onClick: () => {
                          console.log('foo>bar')
                        },
                      },
                    ],
                  },
                ],
              },
              {
                label: 'bar',
                icon: <Circle />,
                onClick: () => {
                  console.log('foo')
                },
              },
            ],
          },
          // { property: 'name', displayName: 'Name', menu: <ButtonMenu button={'≡'}>yooooo</ButtonMenu> },
          {
            property: 'name',
            displayName: 'Name',
            menu: (
              <Flex style={{ padding: '8px', marginLeft: 'auto' }}>
                <Star />
              </Flex>
            ),
          },
          {
            property: 'age',
            displayName: 'Age',
            menuDescriptor: [
              {
                label: 'foo',
                icon: <Circle />,
                onClick: () => {
                  console.log('foo')
                },
                children: [
                  {
                    label: 'bar',
                    icon: <Circle />,
                    onClick: () => {
                      console.log('foo>bar')
                    },
                  },
                ],
                // type: ,
                // Link: ,
                // to: ,
                // href: ,
                // target: ,
                // isFullWidth: ,
              },
            ],
          },
        ]}
        data={[
          {
            age: 123,
            firstName: 'foozefv ojnzfkgjnbzjrnvzoekrjnv',
            name: 'bar',
          },
          {
            age: 123,
            firstName: 'baz kzejfnvlskngd bl lknf lkzfn g',
            name: 'foo',
          },
          { age: 123, firstName: 'fuz', name: 'fob' },
          { age: 123, firstName: 'voo', name: 'mar' },
          {
            age: 123,
            firstName:
              'boplkznfknlfjgnkjnzfjkleznlfnzekjrfnkzenrkzejrnkzejrnf',
            name: 'vrn',
          },
        ]}
        sortable
        sortDirections={state.sortDirections}
        defaultSortDirections={undefined}
        onSortChange={(property, sortDirection, newSortDirections) => {
          console.log('mdx: newSortDirections', newSortDirections)
          setState({ ...state, sortDirections: newSortDirections })
        }}
        // tableHeaderOverlayRender={(data) => {
        //   console.log('data', data)
        //   return (
        //     <Flex
        //       style={{
        //         position: 'absolute',
        //         top: 0,
        //         left: 0,
        //         right: 0,
        //         height: '36px',
        //         // bottom: 0,
        //         width: '100%',
        //         background: 'wheat',
        //       }}
        //     >
        //       {`${data.selected.length} selected on ${data.data.length} total`}
        //     </Flex>
        //   )
        // }}
      />
    )}
  </WithState>
</ThemeProvider>

<ThemeProvider>
  <WithState
    defaultState={{
      selected: ['bar', 'vrn'],
      sortDirections: [
        { property: 'name' },
        { property: 'firstName', sortDirection: 'ASC' },
      ],
    }}
  >
    {(state, setState) => (
      <DataGrid
        useSmartOverflowX
        resizable
        reorderable
        propertyKey="name"
        selectable
        multiSelectable
        selected={state.selected}
        onInvertSelection={selected => {
          console.log('datagrid.mdx onInvertSelection', selected)
          setState({ ...state, selected })
        }}
        onSelectionChange={(isSelected, entityId, selected) => {
          console.log(
            'isSelected, entityId, selected',
            isSelected,
            entityId,
            selected,
          )
          setState({ ...state, selected })
        }}
        onSelectAllChange={selectAllChecked => {
          console.log('selectAllChecked', selectAllChecked)
          setState({
            ...state,
            selected: selectAllChecked
              ? [
                  { age: 123, firstName: 'foo', name: 'bar' },
                  { age: 123, firstName: 'baz', name: 'foo' },
                  { age: 123, firstName: 'fuz', name: 'fob' },
                  { age: 123, firstName: 'voo', name: 'mar' },
                  { age: 123, firstName: 'bop', name: 'vrn' },
                ].map(({ name }) => name)
              : [],
          })
        }}
        model={[
          {
            property: 'firstName',
            displayName: 'First name',
            CellDetail: entity => {
              return (
                <div style={{ padding: '16px' }}>
                  <h4>Valid Data</h4>
                  <p>Lorem ipsum dolor sit amet</p>
                  <Flex
                    style={{ justifyContent: 'flex-start', margin: '8px 0' }}
                  >
                    <Circle style={{ margin: '0 8px' }} />
                    <Circle style={{ margin: '0 8px' }} />
                  </Flex>
                  <div>
                    <a href="#">View original</a>
                  </div>
                  <div>
                    <a href="#">Search for similar</a>
                  </div>
                </div>
              )
            },
            // Component,
            menuDescriptor: [
              {
                label: 'foo',
                icon: <Circle />,
                onClick: () => {
                  console.log('foo')
                },
                children: [
                  {
                    label: 'bar',
                    icon: <Circle />,
                    onClick: () => {
                      console.log('foo>bar')
                    },
                  },
                  {
                    label: 'foo',
                    icon: <Circle />,
                    onClick: () => {
                      console.log('foo>bar')
                    },
                    children: [
                      {
                        label: 'bar',
                        icon: <Circle />,
                        onClick: () => {
                          console.log('foo>bar')
                        },
                      },
                      {
                        label: 'foo',
                        icon: <Circle />,
                        onClick: () => {
                          console.log('foo>bar')
                        },
                      },
                    ],
                  },
                ],
              },
              {
                label: 'bar',
                icon: <Circle />,
                onClick: () => {
                  console.log('foo')
                },
              },
            ],
          },
          // { property: 'name', displayName: 'Name', menu: <ButtonMenu button={'≡'}>yooooo</ButtonMenu> },
          {
            property: 'name',
            displayName: 'Name',
            menu: (
              <Flex style={{ padding: '8px', marginLeft: 'auto' }}>
                <Star />
              </Flex>
            ),
          },
          {
            property: 'age',
            displayName: 'Age',
            menuDescriptor: [
              {
                label: 'foo',
                icon: <Circle />,
                onClick: () => {
                  console.log('foo')
                },
                children: [
                  {
                    label: 'bar',
                    icon: <Circle />,
                    onClick: () => {
                      console.log('foo>bar')
                    },
                  },
                ],
                // type: ,
                // Link: ,
                // to: ,
                // href: ,
                // target: ,
                // isFullWidth: ,
              },
            ],
          },
        ]}
        data={[
          {
            age: 123,
            firstName: 'foozefv ojnzfkgjnbzjrnvzoekrjnv',
            name: 'bar',
          },
          {
            age: 123,
            firstName: 'baz kzejfnvlskngd bl lknf lkzfn g',
            name: 'foo',
          },
          { age: 123, firstName: 'fuz', name: 'fob' },
          { age: 123, firstName: 'voo', name: 'mar' },
          {
            age: 123,
            firstName:
              'boplkznfknlfjgnkjnzfjkleznlfnzekjrfnkzenrkzejrnkzejrnf',
            name: 'vrn',
          },
        ]}
        sortable
        sortDirections={state.sortDirections}
        defaultSortDirections={undefined}
        onSortChange={(property, sortDirection, newSortDirections) => {
          console.log('mdx: newSortDirections', newSortDirections)
          setState({ ...state, sortDirections: newSortDirections })
        }}
        // tableHeaderOverlayRender={(data) => {
        //   console.log('data', data)
        //   return (
        //     <Flex
        //       style={{
        //         position: 'absolute',
        //         top: 0,
        //         left: 0,
        //         right: 0,
        //         height: '36px',
        //         // bottom: 0,
        //         width: '100%',
        //         background: 'wheat',
        //       }}
        //     >
        //       {`${data.selected.length} selected on ${data.data.length} total`}
        //     </Flex>
        //   )
        // }}
      />
    )}
  </WithState>
</ThemeProvider>

Basic usage (useSmartOverflowX + resizable + reorderable)

Main Constructor	Vehicule Model	Terrain
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon	space
Tesla	model X	earth, mars
SpaceX	dragon	space

<ThemeProvider>
  <DataGrid
    reorderable
    useSmartOverflowX
    resizable
    model={[
      { property: 'constructor', displayName: 'Main Constructor' },
      { property: 'model', displayName: 'Vehicule Model' },
      { property: 'application', displayName: 'Terrain' },
      { property: 'year', displayName: 'Year', hide: true },
    ]}
    data={[
      {
        constructor:
          'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
        model: 'falcon',
        application: 'space',
        year: 2013,
      },
      { constructor: 'Tesla', model: 'model X', application: 'earth, mars' },
      {
        constructor: 'SpaceX',
        model: 'dragon',
        application: 'space',
        year: 2012,
      },
    ]}
  />
</ThemeProvider>

<ThemeProvider>
  <DataGrid
    reorderable
    useSmartOverflowX
    resizable
    model={[
      { property: 'constructor', displayName: 'Main Constructor' },
      { property: 'model', displayName: 'Vehicule Model' },
      { property: 'application', displayName: 'Terrain' },
      { property: 'year', displayName: 'Year', hide: true },
    ]}
    data={[
      {
        constructor:
          'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
        model: 'falcon',
        application: 'space',
        year: 2013,
      },
      { constructor: 'Tesla', model: 'model X', application: 'earth, mars' },
      {
        constructor: 'SpaceX',
        model: 'dragon',
        application: 'space',
        year: 2012,
      },
    ]}
  />
</ThemeProvider>

Basic usage (useSmartOverflowX)

Main Constructor	Vehicule Model	Terrain
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon	space
Tesla	model X	earth, mars
SpaceX	dragon	space

<ThemeProvider>
  <DataGrid
    useSmartOverflowX
    model={[
      { property: 'constructor', displayName: 'Main Constructor' },
      { property: 'model', displayName: 'Vehicule Model' },
      { property: 'application', displayName: 'Terrain' },
      { property: 'year', displayName: 'Year', hide: true },
    ]}
    data={[
      {
        constructor:
          'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
        model: 'falcon',
        application: 'space',
        year: 2013,
      },
      { constructor: 'Tesla', model: 'model X', application: 'earth, mars' },
      {
        constructor: 'SpaceX',
        model: 'dragon',
        application: 'space',
        year: 2012,
      },
    ]}
  />
</ThemeProvider>

<ThemeProvider>
  <DataGrid
    useSmartOverflowX
    model={[
      { property: 'constructor', displayName: 'Main Constructor' },
      { property: 'model', displayName: 'Vehicule Model' },
      { property: 'application', displayName: 'Terrain' },
      { property: 'year', displayName: 'Year', hide: true },
    ]}
    data={[
      {
        constructor:
          'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
        model: 'falcon',
        application: 'space',
        year: 2013,
      },
      { constructor: 'Tesla', model: 'model X', application: 'earth, mars' },
      {
        constructor: 'SpaceX',
        model: 'dragon',
        application: 'space',
        year: 2012,
      },
    ]}
  />
</ThemeProvider>

Basic usage (ex 3)

Main Constructor	Vehicule Model	Terrain
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon	space
Tesla	model X	earth, mars
SpaceX	dragon	space

<ThemeProvider>
  <DataGrid
    model={[
      { property: 'constructor', displayName: 'Main Constructor' },
      { property: 'model', displayName: 'Vehicule Model' },
      { property: 'application', displayName: 'Terrain' },
      { property: 'year', displayName: 'Year', hide: true },
    ]}
    data={[
      {
        constructor:
          'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
        model: 'falcon',
        application: 'space',
        year: 2013,
      },
      { constructor: 'Tesla', model: 'model X', application: 'earth, mars' },
      {
        constructor: 'SpaceX',
        model: 'dragon',
        application: 'space',
        year: 2012,
      },
    ]}
  />
</ThemeProvider>

<ThemeProvider>
  <DataGrid
    model={[
      { property: 'constructor', displayName: 'Main Constructor' },
      { property: 'model', displayName: 'Vehicule Model' },
      { property: 'application', displayName: 'Terrain' },
      { property: 'year', displayName: 'Year', hide: true },
    ]}
    data={[
      {
        constructor:
          'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
        model: 'falcon',
        application: 'space',
        year: 2013,
      },
      { constructor: 'Tesla', model: 'model X', application: 'earth, mars' },
      {
        constructor: 'SpaceX',
        model: 'dragon',
        application: 'space',
        year: 2012,
      },
    ]}
  />
</ThemeProvider>

with A Bunch of data of length (useSmartOverflowX + resizable + reorderable)

resize and observe the overflow-x automatically changing when the table is wider than "its viewport"

constructor	model	fooz	foo	bar	baz
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$

<ThemeProvider>
  <div>
    <DataGrid
      reorderable
      resizable
      useSmartOverflowX
      data={[
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
      ]}
    />
  </div>
</ThemeProvider>

<ThemeProvider>
  <div>
    <DataGrid
      reorderable
      resizable
      useSmartOverflowX
      data={[
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
      ]}
    />
  </div>
</ThemeProvider>

with A Bunch of data of length (useSmartOverflowX)

resize and observe the overflow-x automatically changing when the table is wider than "its viewport"

constructor	model	fooz	foo	bar	baz
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$	falcon - $$$$$$$$	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$
Tesla - $$$$$$$$	model X	bar - $$$$$$$$	- $$$$$$$$	- $$$$$$$$	- $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$

<ThemeProvider>
  <div>
    <DataGrid
      useSmartOverflowX
      data={[
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
      ]}
    />
  </div>
</ThemeProvider>

<ThemeProvider>
  <div>
    <DataGrid
      useSmartOverflowX
      data={[
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor:
            'SpaceX - $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$ $$$$$$$$',
          model: 'falcon  - $$$$$$$$',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
        {
          constructor: 'Tesla - $$$$$$$$',
          model: 'model X',
          fooz: 'bar  - $$$$$$$$',
          foo: ' - $$$$$$$$',
          bar: '- $$$$$$$$',
          baz:
            ' - $$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$$$$$$$$$ $$$$$$$$$$$$$$$$',
        },
      ]}
    />
  </div>
</ThemeProvider>

Model definition v2 ( show(Bool) [, width(Int)] )

Main Constructor	Vehicule Model	Year
SpaceX	Merlin 1	2005
SpaceX	Kestrel	2003
SpaceX	Raptor	2013
SpaceX	Draco	2012
SpaceX	Draco	2015
SpaceX	SuperDraco	2015

<ThemeProvider>
  <DataGrid
    resizable
    model={[
      {
        property: 'constructor',
        displayName: 'Main Constructor',
        hide: false,
      },
      { property: 'model', displayName: 'Vehicule Model', hide: false },
      {
        property: 'applications',
        displayName: 'Terrain(s)',
        hide: true,
        Component: ({ applications }) => applications.join(', '),
      },
      { property: 'propellant', displayName: 'Propellant', hide: true },
      { property: 'year', displayName: 'Year', hide: false },
    ]}
    data={[
      {
        constructor: 'SpaceX',
        model: 'Merlin 1',
        applications: ['space', 'earth'],
        propellant: 'Kerosene',
        year: 2005,
      },
      {
        constructor: 'SpaceX',
        model: 'Kestrel',
        applications: ['space'],
        propellant: 'Kerosene',
        year: 2003,
      },
      {
        constructor: 'SpaceX',
        model: 'Raptor',
        applications: ['space', 'earth'],
        propellant: 'Methane',
        year: 2013,
      },
      {
        constructor: 'SpaceX',
        model: 'Draco',
        applications: ['space', 'earth'],
        propellant: 'Hypergolic',
        year: 2012,
      },
      {
        constructor: 'SpaceX',
        model: 'Draco',
        applications: ['space', 'earth'],
        propellant: 'Hypergolic',
        year: 2015,
      },
      {
        constructor: 'SpaceX',
        model: 'SuperDraco',
        applications: ['space', 'earth'],
        propellant: 'Hypergolic',
        year: 2015,
      },
    ]}
  />
</ThemeProvider>

<ThemeProvider>
  <DataGrid
    resizable
    model={[
      {
        property: 'constructor',
        displayName: 'Main Constructor',
        hide: false,
      },
      { property: 'model', displayName: 'Vehicule Model', hide: false },
      {
        property: 'applications',
        displayName: 'Terrain(s)',
        hide: true,
        Component: ({ applications }) => applications.join(', '),
      },
      { property: 'propellant', displayName: 'Propellant', hide: true },
      { property: 'year', displayName: 'Year', hide: false },
    ]}
    data={[
      {
        constructor: 'SpaceX',
        model: 'Merlin 1',
        applications: ['space', 'earth'],
        propellant: 'Kerosene',
        year: 2005,
      },
      {
        constructor: 'SpaceX',
        model: 'Kestrel',
        applications: ['space'],
        propellant: 'Kerosene',
        year: 2003,
      },
      {
        constructor: 'SpaceX',
        model: 'Raptor',
        applications: ['space', 'earth'],
        propellant: 'Methane',
        year: 2013,
      },
      {
        constructor: 'SpaceX',
        model: 'Draco',
        applications: ['space', 'earth'],
        propellant: 'Hypergolic',
        year: 2012,
      },
      {
        constructor: 'SpaceX',
        model: 'Draco',
        applications: ['space', 'earth'],
        propellant: 'Hypergolic',
        year: 2015,
      },
      {
        constructor: 'SpaceX',
        model: 'SuperDraco',
        applications: ['space', 'earth'],
        propellant: 'Hypergolic',
        year: 2015,
      },
    ]}
  />
</ThemeProvider>

Name	User groups
John	admin, editor, writer

<ThemeProvider>
  <DataGrid
    model={[
      {
        property: 'name',
        displayName: 'Name',
      },
      {
        property: 'roles',
        displayName: 'User groups',
        Component: entity =>
          entity.roles.map((r, i, { length }) => (
            <div>
              <i>{r}</i>
              {i === length - 1 ? '' : ', '}
            </div>
          )),
      },
    ]}
    data={[{ name: 'John', roles: ['admin', 'editor', 'writer'] }]}
  />
</ThemeProvider>

<ThemeProvider>
  <DataGrid
    model={[
      {
        property: 'name',
        displayName: 'Name',
      },
      {
        property: 'roles',
        displayName: 'User groups',
        Component: entity =>
          entity.roles.map((r, i, { length }) => (
            <div>
              <i>{r}</i>
              {i === length - 1 ? '' : ', '}
            </div>
          )),
      },
    ]}
    data={[{ name: 'John', roles: ['admin', 'editor', 'writer'] }]}
  />
</ThemeProvider>

smart props

model, if not provided, is infered from the first entity in the data collection

Note: using Object.keys

Constructor	Model
Application/vnd Openxmlformats Officedocument Presentationml Presentation	falcon
Tesla	model X
SpaceX	Falcon heavy
SpaceX	Falcon 9
SpaceX	Application/vnd Openxmlformats Officedocument Presentationml Presentation

<ThemeProvider>
  <DataGrid
    useSmartOverflowX
    resizable
    model={[
      {
        property: 'constructor',
        displayName: 'Constructor',
      },
      {
        property: 'model',
        displayName: 'Model',
      },
    ]}
    data={[
      {
        constructor:
          'Application/vnd Openxmlformats Officedocument Presentationml Presentation',
        model: 'falcon',
        foo: 'bar',
        year: 2016,
      },
      { constructor: 'Tesla', model: 'model X', foo: 'bar', year: 2017 },
      {
        constructor: 'SpaceX',
        model: 'Falcon heavy',
        foo: 'bar',
        year: 2014,
      },
      { constructor: 'SpaceX', model: 'Falcon 9', foo: 'bar', year: 2018 },
      {
        constructor: 'SpaceX',
        model:
          'Application/vnd Openxmlformats Officedocument Presentationml Presentation',
        foo: 'bar',
        year: 2019,
      },
    ]}
  />
</ThemeProvider>

<ThemeProvider>
  <DataGrid
    useSmartOverflowX
    resizable
    model={[
      {
        property: 'constructor',
        displayName: 'Constructor',
      },
      {
        property: 'model',
        displayName: 'Model',
      },
    ]}
    data={[
      {
        constructor:
          'Application/vnd Openxmlformats Officedocument Presentationml Presentation',
        model: 'falcon',
        foo: 'bar',
        year: 2016,
      },
      { constructor: 'Tesla', model: 'model X', foo: 'bar', year: 2017 },
      {
        constructor: 'SpaceX',
        model: 'Falcon heavy',
        foo: 'bar',
        year: 2014,
      },
      { constructor: 'SpaceX', model: 'Falcon 9', foo: 'bar', year: 2018 },
      {
        constructor: 'SpaceX',
        model:
          'Application/vnd Openxmlformats Officedocument Presentationml Presentation',
        foo: 'bar',
        year: 2019,
      },
    ]}
  />
</ThemeProvider>

Infered model

model, if not provided, is infered from the first entity in the data collection

Note: using Object.keys

constructor	model
SpaceX	falcon
Tesla	model X

<ThemeProvider>
  <DataGrid
    data={[
      { constructor: 'SpaceX', model: 'falcon' },
      { constructor: 'Tesla', model: 'model X', foo: 'bar' },
    ]}
  />
</ThemeProvider>

<ThemeProvider>
  <DataGrid
    data={[
      { constructor: 'SpaceX', model: 'falcon' },
      { constructor: 'Tesla', model: 'model X', foo: 'bar' },
    ]}
  />
</ThemeProvider>

Props

data

array

[]

DataGrid

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Example usage (uncontrolled single selection)

Valid Data

Valid Data

Valid Data

Valid Data

Valid Data

Valid Data

Valid Data

Valid Data

Valid Data

Valid Data

Example usage (uncontrolled single selection)