CODEWITHSUNDEEP
reactjsmaterial-uimaterial-table
Micro Kumar
Micro Kumar

Reputation: 207

How to render the icon in Material table Header

Hi to all, I need to render icons in the Material table header column. How can I add it?. It is possible to add the icon in the Header column in Material Table.

Sample Code:


    function PositioningActionsColumn() {
      return (
        <MaterialTable
          title="Positioning Actions Column Preview"
          columns={[
            { title: 'Name', field: 'name' },
            { title: 'Surname', field: 'surname' },
            { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
            {
              title: 'Birth Place',
              field: 'birthCity',
              lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
            },
          ]}
          data={[
            { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
            { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
          ]}
          actions={[
            {
              icon: 'save',
              tooltip: 'Save User',
              onClick: (event, rowData) => alert("You saved " + rowData.name)
            },
            rowData => ({
              icon: 'delete',
              tooltip: 'Delete User',
              onClick: (event, rowData) => confirm("You want to delete " + rowData.name),
              disabled: rowData.birthYear < 2000
            })
          ]}
          options={{
            actionsColumnIndex: -1
          }}
        />
      )
    }

Output: OutPut

Expected Output: Expected Output

Upvotes: 0

Views: 2650

Answers (1)

Nazar Usik
Nazar Usik

Reputation: 11

You may use render:

columns={[
  {
    field: 'url',
    title: 'Avatar',
    render: rowData => <img src={rowData.url} style={{width: 50, borderRadius: '50%'}}/>
  }
]}

Or components:

components={{
    Toolbar: props => (
        <MTableCell {...props} >
           // props.rowData
           <Button .../>
        </MTableCell>
    )
}}

Upvotes: 1

Related Questions