TableV2

TableV2 is the new version of the Atlas Table.

Example

Live Editor

function MyTable() { const columns = [ { Header: 'First', accessor: 'firstName' }, { Header: 'Last', accessor: 'lastName' } ]; const data = [ { firstName: 'firstName_1', lastName: 'lastName_1' }, { firstName: 'firstName_2', lastName: 'lastName_2' } ]; return <TableV2 data={data} columns={columns} />; }

function MyTable() {
  const columns = [
    {
      Header: 'First',
      accessor: 'firstName'
    },
    {
      Header: 'Last',
      accessor: 'lastName'
    }
  ];
  const data = [
    {
      firstName: 'firstName_1',
      lastName: 'lastName_1'
    },
    {
      firstName: 'firstName_2',
      lastName: 'lastName_2'
    }
  ];

  return <TableV2 data={data} columns={columns} />;
}

Result

Loading...

Variants

Alignment

left, center and medium are the supported alignments, accessed using align prop under columns, left as default.

Live Editor

function MyTable() { const columns = [ { Header: 'Name', accessor: 'name' }, { Header: 'Age', accessor: 'age', align: 'center' }, { Header: 'Room', accessor: 'room', align: 'right' } ]; const data = [ { name: 'Just a name', age: 21, room: 1 }, { name: 'Another name', age: 25, room: 2 } ]; return <TableV2 data={data} columns={columns} />; }

function MyTable() {
  const columns = [
    {
      Header: 'Name',
      accessor: 'name'
    },
    {
      Header: 'Age',
      accessor: 'age',
      align: 'center'
    },
    {
      Header: 'Room',
      accessor: 'room',
      align: 'right'
    }
  ];
  const data = [
    {
      name: 'Just a name',
      age: 21,
      room: 1
    },
    {
      name: 'Another name',
      age: 25,
      room: 2
    }
  ];

  return <TableV2 data={data} columns={columns} />;
}

Result

Loading...

Column Resizing

The Table supports the column resizing function. You can use isResizable prop for making desired columns resizable. If you want to limit resizable column width value, you can use for the column maxWidth property.

You can use the onColumnResized callback property to get the new width of the column that was resized. The callback will be passed a column argument which is of type TableColumn.

You can use the minWidth and maxWidth properties to limitization the reached resized value. For more information pleace check the Min and Max width example

Live Editor

function MyTable() { const columns = [ { Header: 'First', accessor: 'firstName', isResizable: true }, { Header: 'Last', accessor: 'lastName', isResizable: false } ]; const data = [ { firstName: 'firstName_1', lastName: 'lastName_1', room: 1 }, { firstName: 'firstName_2', lastName: 'lastName_2', room: 2 } ]; const handleColumnResized = (column) => { console.log(column.Header); console.log(column.accessor); console.log(column.isResizable); // column.width is the new width the column was resized to console.log(column.width); }; return ( <TableV2 data={data} columns={columns} onColumnResized={handleColumnResized} /> ); }

function MyTable() {
  const columns = [
    {
      Header: 'First',
      accessor: 'firstName',
      isResizable: true
    },
    {
      Header: 'Last',
      accessor: 'lastName',
      isResizable: false
    }
  ];
  const data = [
    {
      firstName: 'firstName_1',
      lastName: 'lastName_1',
      room: 1
    },
    {
      firstName: 'firstName_2',
      lastName: 'lastName_2',
      room: 2
    }
  ];

  const handleColumnResized = (column) => {
    console.log(column.Header);
    console.log(column.accessor);
    console.log(column.isResizable);

    // column.width is the new width the column was resized to
    console.log(column.width);
  };

  return (
    <TableV2
      data={data}
      columns={columns}
      onColumnResized={handleColumnResized}
    />
  );
}

Result

Loading...

Compact Mode

There is a compact mode enabled by setting compact to true. Here we will be reducing the padding by half from left and right.

Live Editor

function MyTable() { const columns = [ { Header: 'Name', accessor: 'name' }, { Header: 'Role', accessor: 'role' } ]; const data = [ { name: 'Just a name', role: 'User' }, { name: 'Role', role: 'Admin' } ]; const visualPropertiesBordered = { areColumnsBordered: true }; return ( <TableV2 data={data} columns={columns} visualProperties={visualPropertiesBordered} compact /> ); }

function MyTable() {
  const columns = [
    {
      Header: 'Name',
      accessor: 'name'
    },
    {
      Header: 'Role',
      accessor: 'role'
    }
  ];
  const data = [
    {
      name: 'Just a name',
      role: 'User'
    },
    {
      name: 'Role',
      role: 'Admin'
    }
  ];

  const visualPropertiesBordered = {
    areColumnsBordered: true
  };
  return (
    <TableV2
      data={data}
      columns={columns}
      visualProperties={visualPropertiesBordered}
      compact
    />
  );
}

Result

Loading...

Custom Cell Renderer

There are Header, Footer, Cell property within the column configuration. With them you can define the custom render function for the header, the footer and a table cell accordingly.

Live Editor

function MyTable() { const columns = [ { Header: 'First Name', accessor: 'firstName', Footer: () => 'Total' }, { Header: 'Last Name', accessor: 'lastName', width: 300, Cell: ({ value }) => <Badge label={value} /> }, { Header: 'Points', accessor: 'points', align: 'right', alignHeader: 'right', Footer: (info) => { const { rows } = info; const totalValue = rows.reduce((sum, row) => { const { values } = row; const value = values['points']; if (!value) { return sum; } return sum + parseFloat(value); }, 0); return totalValue; } } ]; const data = [ { firstName: 'Just a name', lastName: 'Some lastName', points: 10 }, { firstName: 'Another name', lastName: 'Another lastName', points: 11 }, { firstName: 'Random name', lastName: 'Random lastName', points: 700 } ]; return ( <TableV2 height={300} data={data} columns={columns} /> ); }

function MyTable() {
  const columns = [
    {
      Header: 'First Name',
      accessor: 'firstName',
      Footer: () => 'Total'
    },
    {
      Header: 'Last Name',
      accessor: 'lastName',
      width: 300,
      Cell: ({ value }) => <Badge label={value} />
    },
    {
      Header: 'Points',
      accessor: 'points',
      align: 'right',
      alignHeader: 'right',
      Footer: (info) => {
        const { rows } = info;
        const totalValue = rows.reduce((sum, row) => {
          const { values } = row;
          const value = values['points'];

          if (!value) {
            return sum;
          }

          return sum + parseFloat(value);
        }, 0);
        return totalValue;
      }
    }
  ];

  const data = [
    {
      firstName: 'Just a name',
      lastName: 'Some lastName',
      points: 10
    },
    {
      firstName: 'Another name',
      lastName: 'Another lastName',
      points: 11
    },
    {
      firstName: 'Random name',
      lastName: 'Random lastName',
      points: 700
    }
  ];

  return (
    <TableV2 height={300} data={data} columns={columns} />
  );
}

Result

Loading...

Custom Cell Renderer on Row Hover

If you want to update your custom Cell component when the row it belongs to changes, you can use the getHoveredRowId method to get the id of the row currently being hovered.

Live Editor

function MyTable() { const [rowIdHovered, setRowIdHovered] = useState(); const CustomCellComp = ({ value, rowId }) => { if (rowIdHovered === rowId) { return <div>row hovered</div>; } else { return <div>row not hovered</div>; } }; const columns = [ { Header: 'First Name', accessor: 'firstName', Footer: () => 'Total' }, { Header: 'Last Name', accessor: 'lastName', width: 300, Cell: ({ value }) => <Badge label={value} /> }, { Header: 'Points', accessor: 'points', align: 'right', alignHeader: 'right', Cell: ({ value, row: { id } }) => ( <CustomCellComp value={value} rowId={id} /> ), Footer: (info) => { const { rows } = info; const totalValue = rows.reduce((sum, row) => { const { values } = row; const value = values['points']; if (!value) { return sum; } return sum + parseFloat(value); }, 0); return totalValue; } } ]; const data = Array.from({ length: 1000 }, (_, index) => ({ firstName: `firstName_${index + 1}`, lastName: `lastName_${index + 1}`, room: index + 1 })); return ( <TableV2 data={data} columns={columns} getHoveredRowId={setRowIdHovered} height={500} /> ); }

function MyTable() {
  const [rowIdHovered, setRowIdHovered] = useState();

  const CustomCellComp = ({ value, rowId }) => {
    if (rowIdHovered === rowId) {
      return <div>row hovered</div>;
    } else {
      return <div>row not hovered</div>;
    }
  };

  const columns = [
    {
      Header: 'First Name',
      accessor: 'firstName',
      Footer: () => 'Total'
    },
    {
      Header: 'Last Name',
      accessor: 'lastName',
      width: 300,
      Cell: ({ value }) => <Badge label={value} />
    },
    {
      Header: 'Points',
      accessor: 'points',
      align: 'right',
      alignHeader: 'right',
      Cell: ({ value, row: { id } }) => (
        <CustomCellComp value={value} rowId={id} />
      ),
      Footer: (info) => {
        const { rows } = info;
        const totalValue = rows.reduce((sum, row) => {
          const { values } = row;
          const value = values['points'];

          if (!value) {
            return sum;
          }

          return sum + parseFloat(value);
        }, 0);
        return totalValue;
      }
    }
  ];

  const data = Array.from({ length: 1000 }, (_, index) => ({
    firstName: `firstName_${index + 1}`,
    lastName: `lastName_${index + 1}`,
    room: index + 1
  }));

  return (
    <TableV2 data={data} columns={columns} getHoveredRowId={setRowIdHovered} height={500} />
  );
}

Result

Loading...

Custom backgroundColor for the Cells

Changing the default cell background color requires passing custom cell markup. Since table cells have a default padding, in order to render a custom cell that takes the full cell width and height, it must be turned off by setting hasPadding to false.

Live Editor

function MyTable() { const getCustomCell = (value) => { let color = 'unset'; if (value === 'created') color = ColorPositive10; if (value === 'removed') color = ColorNegative10; if (value === 'changed') color = ColorNeutral10; const style = { backgroundColor: color, height: '100%', display: 'flex', alignItems: 'center', padding: '4px 16px' } return <div style={style}>{value}</div>; } const columns = [ { Header: 'First Name', accessor: 'firstName', Footer: () => 'Total' }, { Header: 'Last Name', accessor: 'lastName' }, { Header: 'Activity', accessor: 'activity', Cell: ({value}) => getCustomCell(value), hasPadding: false }, { Header: 'Age', accessor: 'age', align: 'left' }, { Header: 'City', // You need to pass the accessor as below when you // have some special characters like square brackets[] in it accessor: (rows) => rows['[user].city'], id: '[user].city' } ]; const data = [ { firstName: 'firstName_1', lastName: 'lastName_1', activity: 'created', age: 36, job: { title: 'job_title_1' }, '[user].city': 'Berlin' }, { firstName: 'firstName_2', lastName: 'lastName_2', activity: 'changed', age: 29, job: { title: 'job_title_2' }, '[user].city': 'Sydney' }, { firstName: 'firstName_3', lastName: 'lastName_3', activity: 'removed', age: 30, job: { title: 'job_title_3' }, '[user].city': 'London' } ]; return ( <TableV2 data={data} columns={columns} /> ); }

function MyTable() { 
  const getCustomCell = (value) => {
    let color = 'unset';
    
    if (value === 'created') color = ColorPositive10;
    if (value === 'removed') color = ColorNegative10;
    if (value === 'changed') color = ColorNeutral10;
    
    const style = {
      backgroundColor: color,
      height: '100%',
      display: 'flex',
      alignItems: 'center',
      padding: '4px 16px'
    }
  
    return <div style={style}>{value}</div>;
  }

  const columns = [
    {
      Header: 'First Name',
      accessor: 'firstName',
      Footer: () => 'Total'
    },
    {
      Header: 'Last Name',
      accessor: 'lastName'
    },
    {
      Header: 'Activity',
      accessor: 'activity',
      Cell: ({value}) => getCustomCell(value),
      hasPadding: false
    },
    {
      Header: 'Age',
      accessor: 'age',
      align: 'left'
    },
    {
      Header: 'City',
      // You need to pass the accessor as below when you
      // have some special characters like square brackets[] in it
      accessor: (rows) => rows['[user].city'],
      id: '[user].city'
    }
  ];

  const data = [
    {
      firstName: 'firstName_1',
      lastName: 'lastName_1',
      activity: 'created',
      age: 36,
      job: {
        title: 'job_title_1'
      },
      '[user].city': 'Berlin'
    },
    {
      firstName: 'firstName_2',
      lastName: 'lastName_2',
      activity: 'changed',
      age: 29,
      job: {
        title: 'job_title_2'
      },
      '[user].city': 'Sydney'
    },
    {
      firstName: 'firstName_3',
      lastName: 'lastName_3',
      activity: 'removed',
      age: 30,
      job: {
        title: 'job_title_3'
      },
      '[user].city': 'London'
    }
  ];

  return (
    <TableV2
      data={data}
      columns={columns}
    />
  );
}

Result

Loading...

DND Column re-ordering

The Table supports the drag-and-drop column re-ordering function. You can use isDraggable prop for making desired columns draggable for re-ordering.

You can also use onColumnRearrange callback property to get an ordered array of column accessors as a first argument and perform any action after column is rearranged.

Live Editor

function MyTable() { const columns = [ { Header: 'First', accessor: 'firstName', isDraggable: true }, { Header: 'Last', accessor: 'lastName', isDraggable: true } ]; const data = [ { firstName: 'firstName_1', lastName: 'lastName_1', room: 1 }, { firstName: 'firstName_2', lastName: 'lastName_2', room: 2 } ]; const onColumnRearrange = (columnsOrder) => { // columnsOrder points to an ordered array of accessors like ['role', 'city', 'name'] console.log('Column Rearranged!', columnsOrder); }; return ( <TableV2 data={data} columns={columns} onColumnRearrange={onColumnRearrange} /> ); }

function MyTable() {
  const columns = [
    {
      Header: 'First',
      accessor: 'firstName',
      isDraggable: true
    },
    {
      Header: 'Last',
      accessor: 'lastName',
      isDraggable: true
    }
  ];
  const data = [
    {
      firstName: 'firstName_1',
      lastName: 'lastName_1',
      room: 1
    },
    {
      firstName: 'firstName_2',
      lastName: 'lastName_2',
      room: 2
    }
  ];

  const onColumnRearrange = (columnsOrder) => {
    // columnsOrder points to an ordered array of accessors like ['role', 'city', 'name']
    console.log('Column Rearranged!', columnsOrder);
  };

  return (
    <TableV2
      data={data}
      columns={columns}
      onColumnRearrange={onColumnRearrange}
    />
  );
}

Result

Loading...

Empty State

You can add an Empty State by using prop emptyState. It is shown if there is no data.

Live Editor

function MyTable() { const columns = [ { Header: 'First', accessor: 'firstName', isDraggable: true, Footer: () => 'FirstName' }, { Header: 'Last', accessor: 'lastName', isDraggable: true } ]; const data = [ { firstName: 'firstName_1', lastName: 'lastName_1' }, { firstName: 'firstName_2', lastName: 'lastName_2' } ]; const emptyStateProps = { headLine: 'Opps! No data', bodyText: 'Please check your searching or filtering.', buttonLabel: 'Retry', buttonIconName: 'ArrowCircleRight', buttonIconAlignment: 'left', onClickButton: () => { console.log('clicked'); } }; return <TableV2 data={[]} columns={columns} emptyState={emptyStateProps} />; }

function MyTable() {
  const columns = [
    {
      Header: 'First',
      accessor: 'firstName',
      isDraggable: true,
      Footer: () => 'FirstName'
    },
    {
      Header: 'Last',
      accessor: 'lastName',
      isDraggable: true
    }
  ];

  const data = [
    {
      firstName: 'firstName_1',
      lastName: 'lastName_1'
    },
    {
      firstName: 'firstName_2',
      lastName: 'lastName_2'
    }
  ];

  const emptyStateProps = {
    headLine: 'Opps! No data',
    bodyText: 'Please check your searching or filtering.',
    buttonLabel: 'Retry',
    buttonIconName: 'ArrowCircleRight',
    buttonIconAlignment: 'left',
    onClickButton: () => {
      console.log('clicked');
    }
  };

  return <TableV2 data={[]} columns={columns} emptyState={emptyStateProps} />;
}

Result

Loading...

First and Last Column padding

You can align first and last columns using the firstColumnLeftPadding & lastColumnRightPadding props under visualProperties.

Live Editor

function MyTable() { const columns = [ { Header: 'First', accessor: 'firstName', isDraggable: true }, { Header: 'Last', accessor: 'lastName', isDraggable: true } ]; const data = [ { firstName: 'firstName_1', lastName: 'lastName_1' }, { firstName: 'firstName_2', lastName: 'lastName_2' } ]; const visualProperties = { firstColumnLeftPadding: 24, lastColumnRightPadding: 0 }; return ( <TableV2 data={data} columns={columns} visualProperties={visualProperties} /> ); }

function MyTable() {
  const columns = [
    {
      Header: 'First',
      accessor: 'firstName',
      isDraggable: true
    },
    {
      Header: 'Last',
      accessor: 'lastName',
      isDraggable: true
    }
  ];
  const data = [
    {
      firstName: 'firstName_1',
      lastName: 'lastName_1'
    },
    {
      firstName: 'firstName_2',
      lastName: 'lastName_2'
    }
  ];

  const visualProperties = {
    firstColumnLeftPadding: 24,
    lastColumnRightPadding: 0
  };

  return (
    <TableV2
      data={data}
      columns={columns}
      visualProperties={visualProperties}
    />
  );
}

Result

Loading...

Footer

The table also supports the footer cells by adding Footer in column options.

Live Editor

function MyTable() { const columns = [ { Header: 'First Name', accessor: 'firstName', Footer: () => 'FirstName' }, { Header: 'Last Name', accessor: 'lastName' } ]; const data = [ { firstName: 'firstName_1', lastName: 'lastName_1' }, { firstName: 'firstName_2', lastName: 'lastName_2' }, { firstName: 'firstName_3', lastName: 'lastName_3' }, { firstName: 'firstName_4', lastName: 'lastName_4' }, { firstName: 'firstName_5', lastName: 'lastName_5' }, { firstName: 'firstName_6', lastName: 'lastName_6' } ]; return <TableV2 data={data} columns={columns} height={240} />; }

function MyTable() {
  const columns = [
    {
      Header: 'First Name',
      accessor: 'firstName',
      Footer: () => 'FirstName'
    },
    {
      Header: 'Last Name',
      accessor: 'lastName'
    }
  ];
  const data = [
    {
      firstName: 'firstName_1',
      lastName: 'lastName_1'
    },
    {
      firstName: 'firstName_2',
      lastName: 'lastName_2'
    },
    {
      firstName: 'firstName_3',
      lastName: 'lastName_3'
    },
    {
      firstName: 'firstName_4',
      lastName: 'lastName_4'
    },
    {
      firstName: 'firstName_5',
      lastName: 'lastName_5'
    },
    {
      firstName: 'firstName_6',
      lastName: 'lastName_6'
    }
  ];

  return <TableV2 data={data} columns={columns} height={240} />;
}

Result

Loading...

Footerless

The prop isFooterless is used for hiding table footers.

Live Editor

function MyTable() { const columns = [ { Header: 'First Name', accessor: 'firstName', Footer: () => 'FirstName' }, { Header: 'Last Name', accessor: 'lastName' } ]; const data = [ { firstName: 'firstName_1', lastName: 'lastName_1' } ]; return <TableV2 data={data} columns={columns} isFooterless />; }

function MyTable() {
  const columns = [
    {
      Header: 'First Name',
      accessor: 'firstName',
      Footer: () => 'FirstName'
    },
    {
      Header: 'Last Name',
      accessor: 'lastName'
    }
  ];
  const data = [
    {
      firstName: 'firstName_1',
      lastName: 'lastName_1'
    }
  ];

  return <TableV2 data={data} columns={columns} isFooterless />;
}

Result

Loading...

Flex Table

The prop flex supports the flex layout feature by using width as the flex-basis and flex-grow. This feature becomes useful when implementing both virtualized and resizable tables that must also be able to stretch to fill all available space

You can also add disableResizing: true to column option to create a fixed width column. That column will not grow to fill positive free space.

info

To deal with the core column options width, minWidth, maxWidth in a flex table, you should pay the attention as follows:

• minWidth is only used to limit column resizing. It does not define the minimum width for a column.
• width is used as both the flex-basis and flex-grow. This means that it essentially acts as both the minimum width and flex-ratio of the column.
• maxWidth is only used to limit column resizing. It does not define the maximum width for a column

warning

Flex table doesn't support column virtualization. Please be careful with number of columns will be rendered.

Live Editor

function MyTable() { const visualPropertiesBordered = { areColumnsBordered: true }; const columnsWithSingleFlexGrow = [ { Header: 'First Name', accessor: 'firstName', width: 300, // flex-grow: 300 isDraggable: true, isResizable: true, }, { Header: 'Last Name', accessor: 'lastName', width: 200, // flex-grow: 200 isDraggable: true, isResizable: true, }, { Header: 'Room', accessor: 'room', width: 100, // flex-grow: 100 minWidth: 100, isDraggable: true, isResizable: true, }, { Header: 'Age', accessor: 'age', width: 70, minWidth: 70, disableResizing: true, // no flex isDraggable: true }, ]; const columnsWithGroupHeader = [ { Header: 'Name', columns: [ { Header: 'First Name', accessor: 'firstName', width: 300, isDraggable: true, }, { Header: 'Last Name', accessor: 'lastName', isDraggable: true, }, ] }, { Header: 'Info', columns: [ { Header: 'Age', accessor: 'age', width: 70, minWidth: 70, disableResizing: true, isDraggable: true }, { Header: 'Room', accessor: 'room', isDraggable: true }, ] } ]; const data = [ { firstName: 'Just a name', lastName: 'Some lastName', room: 1234, age: 34 }, { firstName: 'Another name', lastName: 'Another lastName', room: 1111, age: 40 } ]; return ( <> <TableV2 data={data} columns={columnsWithSingleFlexGrow} visualProperties={visualPropertiesBordered} height={200} flex /> <TableV2 data={data} columns={columnsWithGroupHeader} visualProperties={visualPropertiesBordered} height={200} flex /> </> ); }

function MyTable() {
  const visualPropertiesBordered = {
    areColumnsBordered: true
  };

  const columnsWithSingleFlexGrow = [
    {
      Header: 'First Name',
      accessor: 'firstName',
      width: 300, // flex-grow: 300
      isDraggable: true,
      isResizable: true,
    },
    {
      Header: 'Last Name',
      accessor: 'lastName',
      width: 200, // flex-grow: 200
      isDraggable: true,
      isResizable: true,
    },
    {
      Header: 'Room',
      accessor: 'room',
      width: 100, // flex-grow: 100
      minWidth: 100,
      isDraggable: true,
      isResizable: true,
    },
    {
      Header: 'Age',
      accessor: 'age',
      width: 70, 
      minWidth: 70,
      disableResizing: true, // no flex
      isDraggable: true
    },
  ];

  const columnsWithGroupHeader = [
    {
      Header: 'Name',
      columns: [
        {
          Header: 'First Name',
          accessor: 'firstName',
          width: 300,
          isDraggable: true,
        },
        {
          Header: 'Last Name',
          accessor: 'lastName',
          isDraggable: true,
        },

      ]
    },
    {
      Header: 'Info',
      columns: [
        {
          Header: 'Age',
          accessor: 'age',
          width: 70,
          minWidth: 70,
          disableResizing: true,
          isDraggable: true
        },
        {
          Header: 'Room',
          accessor: 'room',
          isDraggable: true
        },
      ]
    }
  ];

  const data = [
    {
      firstName: 'Just a name',
      lastName: 'Some lastName',
      room: 1234,
      age: 34
    },
    {
      firstName: 'Another name',
      lastName: 'Another lastName',
      room: 1111,
      age: 40
    }
  ];

  return (
    <>
      <TableV2
        data={data}
        columns={columnsWithSingleFlexGrow}
        visualProperties={visualPropertiesBordered}
        height={200}
        flex
      />

      <TableV2
        data={data}
        columns={columnsWithGroupHeader}
        visualProperties={visualPropertiesBordered}
        height={200}
        flex
      />
    </>

  );
}

Result

Loading...

Global Search Filter

You can use this feature to globally search through all columns in the table. To exclude specific columns from global searching you can use the disableGlobalFilter property in your column object.

Live Editor

function MyTable() { const [searchTerm, setSearchTerm] = useState(''); const columns = [ { Header: 'First Name', accessor: 'firstName', Footer: () => 'FirstName' }, { Header: 'Last Name', accessor: 'lastName', disableGlobalFilter: true } ]; const data = [ { firstName: 'John', lastName: 'Doe' }, { firstName: 'Richard', lastName: 'Amstrong' }, { firstName: 'Ama', lastName: 'Doe' } ]; return ( <div style={{ height: 300, overflow: 'auto' }}> <div style={{ padding: '25px 15px 35px 15px' }}> <Input label="Search" type="search" value={searchTerm} onClear={() => { setSearchTerm(''); }} onChange={(e) => { setSearchTerm(e.target.value); }} /> </div> <TableV2 data={data} columns={columns} searchTerm={searchTerm} getFilteredData={(filteredValues) => console.log({ filteredValues })} /> </div> ); }

function MyTable() {
  const [searchTerm, setSearchTerm] = useState('');
  const columns = [
    {
      Header: 'First Name',
      accessor: 'firstName',
      Footer: () => 'FirstName'
    },
    {
      Header: 'Last Name',
      accessor: 'lastName',
      disableGlobalFilter: true
    }
  ];
  const data = [
    {
      firstName: 'John',
      lastName: 'Doe'
    },
    {
      firstName: 'Richard',
      lastName: 'Amstrong'
    },
    {
      firstName: 'Ama',
      lastName: 'Doe'
    }
  ];

  return (
    <div style={{ height: 300, overflow: 'auto' }}>
      <div style={{ padding: '25px 15px 35px 15px' }}>
        <Input
          label="Search"
          type="search"
          value={searchTerm}
          onClear={() => {
            setSearchTerm('');
          }}
          onChange={(e) => {
            setSearchTerm(e.target.value);
          }}
        />
      </div>
      <TableV2
        data={data}
        columns={columns}
        searchTerm={searchTerm}
        getFilteredData={(filteredValues) => console.log({ filteredValues })}
      />
    </div>
  );
}

Result

Loading...

Header Actions

Header cells support using additional actions, such as an Icon Button for setting filters on the specific column.

As shown in the example, you can use the headerActions property inside the column object to assign custom actions to your column.

headerActions accepts a ReactNode type value, which means you can compose your custom components for this area.

info

It's recommended to exclusively employ the IconButton component as the action trigger element within the headerActions. Moreover, it's essential to ensure that all IconButtons adhere to a uniform size="small" prop. While exceptions can be contemplated, they should undergo a meticulous review process to ensure compatibility.

info

It's recommended to use isAutoWidth: true in the Header options when the space is not enough for actions.

Live Editor

function MyTable() { const HeaderActionItem = () => { return ( <ActionMenu items={[ { label: 'Accept', onClick: () => {}, iconName: 'Check' }, { label: 'Decline', onClick: () => {}, iconName: 'Cross' }, { type: 'divider' }, { label: 'Abort', onClick: () => {} } ]} > <IconButton iconName="Filter" size="small" aria-label="Filter" /> </ActionMenu> ); }; const HeaderActions = () => { return <HeaderActionItem />; }; const MultipleHeaderActions = () => { return ( <> <HeaderActionItem /> <HeaderActionItem /> <HeaderActionItem /> </> ); }; const columns = [ { Header: 'First', accessor: 'firstName', headerActions: <HeaderActions /> }, { Header: 'Last', accessor: 'lastName', headerActions: <MultipleHeaderActions /> } ]; const data = [ { firstName: 'firstName_1', lastName: 'lastName_1' }, { firstName: 'firstName_2', lastName: 'lastName_2' } ]; return ( <TableV2 data={data} columns={columns} visualProperties={{ areColumnsBordered: true }} /> ); }

function MyTable() {
  const HeaderActionItem = () => {
    return (
      <ActionMenu
        items={[
          { label: 'Accept', onClick: () => {}, iconName: 'Check' },
          { label: 'Decline', onClick: () => {}, iconName: 'Cross' },
          { type: 'divider' },
          {
            label: 'Abort',
            onClick: () => {}
          }
        ]}
      >
        <IconButton iconName="Filter" size="small" aria-label="Filter" />
      </ActionMenu>
    );
  };
  const HeaderActions = () => {
    return <HeaderActionItem />;
  };
  const MultipleHeaderActions = () => {
    return (
      <>
        <HeaderActionItem />
        <HeaderActionItem />
        <HeaderActionItem />
      </>
    );
  };
  const columns = [
    {
      Header: 'First',
      accessor: 'firstName',
      headerActions: <HeaderActions />
    },
    {
      Header: 'Last',
      accessor: 'lastName',
      headerActions: <MultipleHeaderActions />
    }
  ];
  const data = [
    {
      firstName: 'firstName_1',
      lastName: 'lastName_1'
    },
    {
      firstName: 'firstName_2',
      lastName: 'lastName_2'
    }
  ];

  return (
    <TableV2
      data={data}
      columns={columns}
      visualProperties={{ areColumnsBordered: true }}
    />
  );
}

Result

Loading...

Header Alignment

By default, header cell and column cells are aligned according to align property but there're use-cases when header cell needs a different alignment (e.g. RTL text direction). To align header-cell, alignHeader property can be specified for any column within columns array.

The alignHeader property supports the following options (please refer to the table below which shows all of supported options):

1. left - default
2. left-reversed
3. right
4. right-reversed
5. center
6. center-reversed
7. space-between
8. space-between-reversed

Live Editor

function MyTable() { const longText = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."; const width = 250; const [isPopoverOpen, setIsPopoverOpen] = useState(false); const popover = { isIconHighlighted: true, iconName: 'Star', isPopoverOpen: isPopoverOpen, onClick: () => setIsPopoverOpen(true), content: ( <Tile> <span>Popover content</span> </Tile> ) }; const columns = [ { popover, width, sortable: true, Header: 'Default', accessor: 'default' }, { popover, width, sortable: true, Header: 'Left', accessor: 'left', align: 'right', alignHeader: 'left' }, { popover, width, sortable: true, Header: 'Left reversed', accessor: 'left-reversed', align: 'right', alignHeader: 'left-reversed' }, { popover, width, sortable: true, Header: 'Right', accessor: 'right', align: 'right', alignHeader: 'right' }, { popover, width, sortable: true, Header: 'Right reversed', accessor: 'right-reversed', align: 'right', alignHeader: 'right-reversed' }, { popover, width, sortable: true, Header: 'Center', accessor: 'center', align: 'center', alignHeader: 'center' }, { popover, width, sortable: true, Header: 'Center reversed', accessor: 'center-reversed', align: 'center', alignHeader: 'center-reversed' }, { popover, width, sortable: true, Header: 'Space between', accessor: 'space-between', align: 'right', alignHeader: 'space-between' }, { popover, width: 350, sortable: true, Header: 'Space between reversed', accessor: 'space-between-reversed', align: 'right', alignHeader: 'space-between-reversed' } ]; const data = [ { default: 'A', left: 'A', 'left-reversed': 'A', right: 'A', 'right-reversed': 'A', center: 'A', 'center-reversed': 'A', 'space-between': 'A', 'space-between-reversed': 'A' }, { default: 'B', left: 'B', 'left-reversed': 'B', right: 'B', 'right-reversed': 'B', center: 'B', 'center-reversed': 'B', 'space-between': 'B', 'space-between-reversed': 'B' }, { default: longText, left: longText, 'left-reversed': longText, right: longText, 'right-reversed': longText, center: longText, 'center-reversed': longText, 'space-between': longText, 'space-between-reversed': longText } ]; return ( <TableV2 height={250} data={data} columns={columns} activeSorting={{ columnKey: 'default', direction: 'asc' }} visualProperties={{ areColumnsBordered: true }} onSortingChange={(columnKey) => console.log(`onSortingChange: ${columnKey}`)} /> ); }

function MyTable() {
  const longText =
    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";

  const width = 250;
  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
  const popover = {
    isIconHighlighted: true,
    iconName: 'Star',
    isPopoverOpen: isPopoverOpen,
    onClick: () => setIsPopoverOpen(true),
    content: (
      <Tile>
        <span>Popover content</span>
      </Tile>
    )
  };

  const columns = [
    {
      popover,
      width,
      sortable: true,
      Header: 'Default',
      accessor: 'default'
    },
    {
      popover,
      width,
      sortable: true,
      Header: 'Left',
      accessor: 'left',
      align: 'right',
      alignHeader: 'left'
    },
    {
      popover,
      width,
      sortable: true,
      Header: 'Left reversed',
      accessor: 'left-reversed',
      align: 'right',
      alignHeader: 'left-reversed'
    },
    {
      popover,
      width,
      sortable: true,
      Header: 'Right',
      accessor: 'right',
      align: 'right',
      alignHeader: 'right'
    },
    {
      popover,
      width,
      sortable: true,
      Header: 'Right reversed',
      accessor: 'right-reversed',
      align: 'right',
      alignHeader: 'right-reversed'
    },
    {
      popover,
      width,
      sortable: true,
      Header: 'Center',
      accessor: 'center',
      align: 'center',
      alignHeader: 'center'
    },
    {
      popover,
      width,
      sortable: true,
      Header: 'Center reversed',
      accessor: 'center-reversed',
      align: 'center',
      alignHeader: 'center-reversed'
    },
    {
      popover,
      width,
      sortable: true,
      Header: 'Space between',
      accessor: 'space-between',
      align: 'right',
      alignHeader: 'space-between'
    },
    {
      popover,
      width: 350,
      sortable: true,
      Header: 'Space between reversed',
      accessor: 'space-between-reversed',
      align: 'right',
      alignHeader: 'space-between-reversed'
    }
  ];

  const data = [
    {
      default: 'A',
      left: 'A',
      'left-reversed': 'A',
      right: 'A',
      'right-reversed': 'A',
      center: 'A',
      'center-reversed': 'A',
      'space-between': 'A',
      'space-between-reversed': 'A'
    },
    {
      default: 'B',
      left: 'B',
      'left-reversed': 'B',
      right: 'B',
      'right-reversed': 'B',
      center: 'B',
      'center-reversed': 'B',
      'space-between': 'B',
      'space-between-reversed': 'B'
    },
    {
      default: longText,
      left: longText,
      'left-reversed': longText,
      right: longText,
      'right-reversed': longText,
      center: longText,
      'center-reversed': longText,
      'space-between': longText,
      'space-between-reversed': longText
    }
  ];

  return (
    <TableV2
      height={250}
      data={data}
      columns={columns}
      activeSorting={{ columnKey: 'default', direction: 'asc' }}
      visualProperties={{ areColumnsBordered: true }}
      onSortingChange={(columnKey) => console.log(`onSortingChange: ${columnKey}`)}
    />
  );
}

Result

Loading...

Header Groups

To use the grouped header feature, you must configure your columns as nested columns, as in the example below.

Live Editor

function MyTable() { const visualPropertiesBordered = { areColumnsBordered: true }; const columns = [ { Header: 'Name', columns: [ { Header: 'First', accessor: 'firstName', isDraggable: true, isResizable: true }, { Header: 'Last', accessor: 'lastName', isDraggable: true, sortable: false }, { Header: 'Given name', accessor: 'givenName', isDraggable: true, sortable: false } ] }, { Header: 'Age', accessor: 'age', isDraggable: true, sortable: false } ]; const data = [ { firstName: 'firstName_1', lastName: 'lastName_1', givenName: 'givenName_1', age: 36 }, { firstName: 'firstName_2', lastName: 'lastName_2', givenName: 'givenName_2', age: 29 }, { firstName: 'firstName_3', lastName: 'lastName_3', age: 30 }, { firstName: 'firstName_4', lastName: 'lastName_4', age: 28 }, { firstName: 'firstName_5', lastName: 'lastName_5', age: 35 }, { firstName: 'firstName_6', lastName: 'lastName_6', age: 32 } ]; return ( <TableV2 data={data} columns={columns} visualProperties={visualPropertiesBordered} /> ); }

function MyTable() {
  const visualPropertiesBordered = {
    areColumnsBordered: true
  };

  const columns = [
    {
      Header: 'Name',
      columns: [
        {
          Header: 'First',
          accessor: 'firstName',
          isDraggable: true,
          isResizable: true
        },
        {
          Header: 'Last',
          accessor: 'lastName',
          isDraggable: true,
          sortable: false
        },
        {
          Header: 'Given name',
          accessor: 'givenName',
          isDraggable: true,
          sortable: false
        }
      ]
    },
    {
      Header: 'Age',
      accessor: 'age',
      isDraggable: true,
      sortable: false
    }
  ];

  const data = [
    {
      firstName: 'firstName_1',
      lastName: 'lastName_1',
      givenName: 'givenName_1',
      age: 36
    },
    {
      firstName: 'firstName_2',
      lastName: 'lastName_2',
      givenName: 'givenName_2',
      age: 29
    },
    {
      firstName: 'firstName_3',
      lastName: 'lastName_3',
      age: 30
    },
    {
      firstName: 'firstName_4',
      lastName: 'lastName_4',
      age: 28
    },
    {
      firstName: 'firstName_5',
      lastName: 'lastName_5',
      age: 35
    },
    {
      firstName: 'firstName_6',
      lastName: 'lastName_6',
      age: 32
    }
  ];


  return (
      <TableV2
        data={data}
        columns={columns}
        visualProperties={visualPropertiesBordered}
      />
  );
}

Result

Loading...

You can visually hide your group headers with the hideHeaderGroupTitle prop.

Live Editor

function MyTable() { const visualPropertiesBordered = { areColumnsBordered: true }; const columns = [ { Header: 'Name', columns: [ { Header: 'First', accessor: 'firstName', isDraggable: true, isResizable: true }, { Header: 'Last', accessor: 'lastName', isDraggable: true, sortable: false }, { Header: 'Given name', accessor: 'givenName', isDraggable: true, sortable: false } ] }, { Header: 'Age', accessor: 'age', isDraggable: true, sortable: false } ]; const data = [ { firstName: 'firstName_1', lastName: 'lastName_1', givenName: 'givenName_1', age: 36 }, { firstName: 'firstName_2', lastName: 'lastName_2', givenName: 'givenName_2', age: 29 } ]; return ( <TableV2 data={data} columns={columns} visualProperties={visualPropertiesBordered} hideHeaderGroupTitle /> ); }

function MyTable() {
  const visualPropertiesBordered = {
    areColumnsBordered: true
  };

  const columns = [
    {
      Header: 'Name',
      columns: [
        {
          Header: 'First',
          accessor: 'firstName',
          isDraggable: true,
          isResizable: true
        },
        {
          Header: 'Last',
          accessor: 'lastName',
          isDraggable: true,
          sortable: false
        },
        {
          Header: 'Given name',
          accessor: 'givenName',
          isDraggable: true,
          sortable: false
        }
      ]
    },
    {
      Header: 'Age',
      accessor: 'age',
      isDraggable: true,
      sortable: false
    }
  ];

  const data = [
    {
      firstName: 'firstName_1',
      lastName: 'lastName_1',
      givenName: 'givenName_1',
      age: 36
      
    },
    {
      firstName: 'firstName_2',
      lastName: 'lastName_2',
      givenName: 'givenName_2',
      age: 29
    }
  ];


  return (
      <TableV2
        data={data}
        columns={columns}
        visualProperties={visualPropertiesBordered}
        hideHeaderGroupTitle
      />
  );
}

Result

Loading...

Header Group Bordered

You can set border based on grouping using areColumnGroupsBordered prop.

Live Editor

function MyTable() { const visualPropertiesBordered = { areColumnGroupsBordered: true }; const columns = [ { Header: 'Name', columns: [ { Header: 'First', accessor: 'firstName', isDraggable: true, isResizable: true }, { Header: 'Last', accessor: 'lastName', isDraggable: true, sortable: false }, { Header: 'Given name', accessor: 'givenName', isDraggable: true, sortable: false } ] }, { Header: 'More Info', columns: [ { Header: 'Phone', accessor: 'phone' }, { Header: 'Email', accessor: 'email' }, { Header: 'Address', accessor: 'address' }, ] }, { Header: 'More Info 2', columns: [ { Header: 'City', accessor: 'city' }, { Header: 'Pincode', accessor: 'pincode' }, { Header: 'Country', accessor: 'country' }, ] }, { Header: 'Age', accessor: 'age', isDraggable: true, sortable: false }, { Header: 'Work', accessor: 'work', isDraggable: true, sortable: false }, ]; const data = [ { firstName: 'firstName_1', lastName: 'lastName_1', givenName: 'givenName_1', phone: 111111, email: 'ab_1@mail.com', address: 'somewhere_1', city: 'Berlin', pincode: 111, country: 'Deutschland', age: 11, work: 'work_1' }, { firstName: 'firstName_2', lastName: 'lastName_2', givenName: 'givenName_2', phone: 2222, email: 'ab_2@mail.com', address: 'somewhere_2', city: 'Berlin_2', pincode: 222, country: 'Deutschland_2', age: 2, work: 'work_2' }, { firstName: 'firstName_3', lastName: 'lastName_3', givenName: 'givenName_3', phone: 333333, email: 'ab_3@mail.com', address: 'somewhere_3', city: 'Berlin_3', pincode: 3, country: 'Deutschland_3', age: 333, work: 'work_3' }, { firstName: 'firstName_4', lastName: 'lastName_4', givenName: 'givenName_4', phone: 444444, email: 'ab_4@mail.com', address: 'somewhere_4', city: 'Berlin_4', pincode: 444, country: 'Deutschland_4', age: 4, work: 'work_4' }, { firstName: 'firstName_5', lastName: 'lastName_5', givenName: 'givenName_5', phone: 5555, email: 'ab_5@mail.com', address: 'somewhere_5', city: 'Berlin_5', pincode: 555, country: 'Deutschland_5', age: 5, work: 'work_5' }, { firstName: 'firstName_6', lastName: 'lastName_6', givenName: 'givenName_6', phone: 66666, email: 'ab_6@mail.com', address: 'somewhere_6', city: 'Berlin_6', pincode: 666, country: 'Deutschland_6', age: 6, work: 'work_6' } ]; return ( <TableV2 data={data} columns={columns} visualProperties={visualPropertiesBordered} /> ); }

function MyTable() {
  const visualPropertiesBordered = {
    areColumnGroupsBordered: true
  };

  const columns = [
    {
      Header: 'Name',
      columns: [
        {
          Header: 'First',
          accessor: 'firstName',
          isDraggable: true,
          isResizable: true
        },
        {
          Header: 'Last',
          accessor: 'lastName',
          isDraggable: true,
          sortable: false
        },
        {
          Header: 'Given name',
          accessor: 'givenName',
          isDraggable: true,
          sortable: false
        }
      ]
    },
    {
      Header: 'More Info',
      columns: [
        {
          Header: 'Phone',
          accessor: 'phone'
        },
        {
          Header: 'Email',
          accessor: 'email'
        },
        {
          Header: 'Address',
          accessor: 'address'
        },
      ]
    },
   
      {
      Header: 'More Info 2',
      columns: [
        {
          Header: 'City',
          accessor: 'city'
        },
        {
          Header: 'Pincode',
          accessor: 'pincode'
        },
        {
          Header: 'Country',
          accessor: 'country'
        },
      ]
    },
    {
      Header: 'Age',
      accessor: 'age',
      isDraggable: true,
      sortable: false
    },
     {
      Header: 'Work',
      accessor: 'work',
      isDraggable: true,
      sortable: false
    },
  ];

  const data = [
    {
      firstName: 'firstName_1',
      lastName: 'lastName_1',
      givenName: 'givenName_1',
      phone: 111111,
      email: 'ab_1@mail.com',
      address: 'somewhere_1',
      city: 'Berlin',
      pincode: 111,
      country: 'Deutschland',
      age: 11,
      work: 'work_1'
    },
    {
      firstName: 'firstName_2',
      lastName: 'lastName_2',
      givenName: 'givenName_2',
      phone: 2222,
      email: 'ab_2@mail.com',
      address: 'somewhere_2',
      city: 'Berlin_2',
      pincode: 222,
      country: 'Deutschland_2',
      age: 2,
      work: 'work_2'
    },
    {
      firstName: 'firstName_3',
      lastName: 'lastName_3',
      givenName: 'givenName_3',
      phone: 333333,
      email: 'ab_3@mail.com',
      address: 'somewhere_3',
      city: 'Berlin_3',
      pincode: 3,
      country: 'Deutschland_3',
      age: 333,
      work: 'work_3'
    },
    {
      firstName: 'firstName_4',
      lastName: 'lastName_4',
      givenName: 'givenName_4',
      phone: 444444,
      email: 'ab_4@mail.com',
      address: 'somewhere_4',
      city: 'Berlin_4',
      pincode: 444,
      country: 'Deutschland_4',
      age: 4,
      work: 'work_4'
    },
    {
      firstName: 'firstName_5',
      lastName: 'lastName_5',
      givenName: 'givenName_5',
      phone: 5555,
      email: 'ab_5@mail.com',
      address: 'somewhere_5',
      city: 'Berlin_5',
      pincode: 555,
      country: 'Deutschland_5',
      age: 5,
      work: 'work_5'
    },
    {
      firstName: 'firstName_6',
      lastName: 'lastName_6',
      givenName: 'givenName_6',
      phone: 66666,
      email: 'ab_6@mail.com',
      address: 'somewhere_6',
      city: 'Berlin_6',
      pincode: 666,
      country: 'Deutschland_6',
      age: 6,
      work: 'work_6'
    }
  ];


  return (
      <TableV2
        data={data}
        columns={columns}
        visualProperties={visualPropertiesBordered}
      />
  );
}

Result

Loading...

Header Menu

You can display a menu in header cells by providing your menu content with headerMenuItems property. You can see the example usage of the headerMenuItems property below.

The table uses the Action Menu component inside the header cells. You can also check the Action Menu component examples to get more info about different usages of menu content.

Live Editor

function MyTable() { const menuItems = [ { label: 'Duplicate', onClick: () => {}, iconName: 'Copy' }, { label: 'Edit', onClick: () => {}, iconName: 'Edit' }, { type: 'submenu', label: 'Export', iconName: 'Download', submenuItems: [ { label: 'PNG', onClick: () => {} }, { label: 'PDF', onClick: () => {} }, { label: 'CSV', onClick: () => {} } ] }, { label: 'Delete', onClick: () => {}, iconName: 'Trash' } ]; const columns = [ { Header: 'Name', accessor: 'name', headerMenuItems: menuItems }, { Header: 'Age', accessor: 'age', align: 'center' }, { Header: 'Room', accessor: 'room', align: 'right' } ]; const data = [ { name: 'Just a name', age: 21, room: 1 }, { name: 'Another name', age: 25, room: 2 } ]; const visualProperties = { isStriped: true }; return ( <TableV2 data={data} columns={columns} visualProperties={visualProperties} /> ); }

function MyTable() {
  const menuItems = [
    {
      label: 'Duplicate',
      onClick: () => {},
      iconName: 'Copy'
    },
    {
      label: 'Edit',
      onClick: () => {},
      iconName: 'Edit'
    },
    {
      type: 'submenu',
      label: 'Export',
      iconName: 'Download',
      submenuItems: [
        { label: 'PNG', onClick: () => {} },
        { label: 'PDF', onClick: () => {} },
        { label: 'CSV', onClick: () => {} }
      ]
    },
    {
      label: 'Delete',
      onClick: () => {},
      iconName: 'Trash'
    }
  ];

  const columns = [
    {
      Header: 'Name',
      accessor: 'name',
      headerMenuItems: menuItems
    },
    {
      Header: 'Age',
      accessor: 'age',
      align: 'center'
    },
    {
      Header: 'Room',
      accessor: 'room',
      align: 'right'
    }
  ];
  const data = [
    {
      name: 'Just a name',
      age: 21,
      room: 1
    },
    {
      name: 'Another name',
      age: 25,
      room: 2
    }
  ];

  const visualProperties = {
    isStriped: true
  };

  return (
    <TableV2
      data={data}
      columns={columns}
      visualProperties={visualProperties}
    />
  );
}

Result

Loading...

Headerless

The prop isHeaderless is used for hiding table headers.

Live Editor

function MyTable() { const columns = [ { Header: 'First', accessor: 'firstName' }, { Header: 'Last', accessor: 'lastName' } ]; const data = [ { firstName: 'firstName_1', lastName: 'lastName_1' }, { firstName: 'firstName_2', lastName: 'lastName_2' } ]; return <TableV2 data={data} columns={columns} isHeaderless />; }

function MyTable() {
  const columns = [
    {
      Header: 'First',
      accessor: 'firstName'
    },
    {
      Header: 'Last',
      accessor: 'lastName'
    }
  ];
  const data = [
    {
      firstName: 'firstName_1',
      lastName: 'lastName_1'
    },
    {
      firstName: 'firstName_2',
      lastName: 'lastName_2'
    }
  ];

  return <TableV2 data={data} columns={columns} isHeaderless />;
}

Result

Loading...

Hover Highlighting

isHoverable prop can be used to toggle hover highlighting on table rows. By default, it is set to false.

Live Editor

function MyTable() { const columns = [ { Header: 'First', accessor: 'firstName' }, { Header: 'Last', accessor: 'lastName' } ]; const data = [ { firstName: 'firstName_1', lastName: 'lastName_1' }, { firstName: 'firstName_2', lastName: 'lastName_2' } ]; return <TableV2 data={data} columns={columns} isHoverable />; }

function MyTable() {
  const columns = [
    {
      Header: 'First',
      accessor: 'firstName'
    },
    {
      Header: 'Last',
      accessor: 'lastName'
    }
  ];
  const data = [
    {
      firstName: 'firstName_1',
      lastName: 'lastName_1'
    },
    {
      firstName: 'firstName_2',
      lastName: 'lastName_2'
    }
  ];

  return <TableV2 data={data} columns={columns} isHoverable />;
}

Result

Loading...

Inline editing in Table

You can have inline editing in Table by using updateData prop and defining custom cell which includes needed editable component such as Input, ComboBox, Checkbox, etc.

Live Editor

function MyTable() { const InputCell = ({ value: initialValue, row: { index }, column: { id }, updateData }) => { // We need to keep and update the state of the cell normally const [value, setValue] = React.useState(initialValue); const openSnackbar = useContext(SnackbarContext); const onChange = (e) => { setValue(e.target.value); }; // We'll only update the external data when the input is blurred const onBlur = () => { updateData(index, id, value); openSnackbar({ title: 'Item successfully updated', kind: 'positive' }); }; // If the initialValue is changed external, sync it up with our state React.useEffect(() => { setValue(initialValue); }, [initialValue]); return ( <Input aria-label="age" value={value} onChange={onChange} onBlur={initialValue !== value ? onBlur : undefined} /> ); }; const columns = [ { Header: 'Name', accessor: 'name', Cell: InputCell, isEditable: true }, { Header: 'Age', accessor: 'age' }, { Header: 'Team', accessor: 'team', Cell: InputCell, isEditable: true } ]; const initData = [ { name: 'Name_1', age: 36, team: 'Team_1' }, { name: 'Name_2', age: 29, team: 'Team_2' }, { name: 'Name_3', age: 30, team: 'Team_3' }, { name: 'Name_4', age: 28, team: 'Team_4' }, { name: 'Name_5', age: 35, team: 'Team_5' }, { name: 'Name_6', age: 32, team: 'Team_6' } ]; const [data, setData] = React.useState(initData); // When our cell renderer calls updateData, we'll use // the rowIndex, columnId and new value to update the // original data const updateData = (rowIndex, columnId, value) => { setData((old) => old.map((row, index) => { if (index === rowIndex) { return { ...old[rowIndex], [columnId]: value }; } return row; }) ); }; return ( <SnackbarProvider offsetTop={76}> <TableV2 data={data} updateData={updateData} columns={columns} height={200} /> </SnackbarProvider> ); }

function MyTable() {

  const InputCell = ({
    value: initialValue,
    row: { index },
    column: { id },
    updateData
  }) => {
    // We need to keep and update the state of the cell normally
    const [value, setValue] = React.useState(initialValue);
    const openSnackbar = useContext(SnackbarContext);

    const onChange = (e) => {
      setValue(e.target.value);
    };

    // We'll only update the external data when the input is blurred
    const onBlur = () => {
      updateData(index, id, value);
      openSnackbar({
            title: 'Item successfully updated',
            kind: 'positive'
          });
    };

    // If the initialValue is changed external, sync it up with our state
    React.useEffect(() => {
      setValue(initialValue);
    }, [initialValue]);

    return (
   
      <Input
        aria-label="age"
        value={value}
        onChange={onChange}
        onBlur={initialValue !== value ? onBlur : undefined}
      />
    
    );
  };

  const columns = [
    {
      Header: 'Name',
      accessor: 'name',
      Cell: InputCell,
      isEditable: true
    },
    {
      Header: 'Age',
      accessor: 'age'
    },
    {
      Header: 'Team',
      accessor: 'team',
      Cell: InputCell,
      isEditable: true
    }
  ];

  const initData = [
    {
      name: 'Name_1',
      age: 36,
      team: 'Team_1'
    },
    {
      name: 'Name_2',
      age: 29,
      team: 'Team_2'
    },
    {
      name: 'Name_3',
      age: 30,
      team: 'Team_3'
    },
    {
      name: 'Name_4',
      age: 28,
      team: 'Team_4'
    },
    {
      name: 'Name_5',
      age: 35,
      team: 'Team_5'
    },
    {
      name: 'Name_6',
      age: 32,
      team: 'Team_6'
    }
  ];
  
  const [data, setData] = React.useState(initData);
  // When our cell renderer calls updateData, we'll use
  // the rowIndex, columnId and new value to update the
  // original data
  const updateData = (rowIndex, columnId, value) => {
    setData((old) =>
      old.map((row, index) => {
        if (index === rowIndex) {
          return {
            ...old[rowIndex],
            [columnId]: value
          };
        }
        return row;
      })
    );
  };

  return (
    <SnackbarProvider offsetTop={76}>
      <TableV2 data={data} updateData={updateData}  columns={columns} height={200} />
    </SnackbarProvider>
  );
}

Result

Loading...

Here is another example with more editable cells with ComboBox, Checkbox, SegmentedButton and nested Objects:

Live Editor

function MyTable() { const InputCell = ({ value: initialValue, row: { index }, column: { id }, updateData }) => { // We need to keep and update the state of the cell normally const [value, setValue] = React.useState(initialValue); const onChange = (e) => { setValue(e.target.value); }; // We'll only update the external data when the input is blurred const onBlur = () => { updateData(index, id, value); }; // If the initialValue is changed external, sync it up with our state React.useEffect(() => { setValue(initialValue); }, [initialValue]); return ( <Input aria-label="age" value={value} onChange={onChange} onBlur={onBlur} /> ); }; const SegmentedButtonCell = ({ value: initialValue, row: { index }, column: { id }, updateData }) => { const cities = [ { value: 'shanghai', label: 'Shanghai' }, { value: 'moscow', label: 'Moscow' }, { value: 'berlin', label: 'Berlin' }, { value: 'paris', label: 'Paris' } ]; // We need to keep and update the state of the cell normally const [value, setValue] = React.useState(initialValue); const onChange = (e) => { const updatedValue = e.target.value; setValue(updatedValue); updateData(index, id, updatedValue); }; // If the initialValue is changed external, sync it up with our state React.useEffect(() => { setValue(initialValue); }, [initialValue]); return <SegmentedButton items={cities} value={value} onChange={onChange} />; }; const JobCell = ({ value: initialValue, row: { index }, column: { id }, updateData }) => { // We need to keep and update the state of the cell normally const [value, setValue] = React.useState(initialValue); const onChange = (e) => { const { name, value } = e.target; setValue((prevState) => ({ ...prevState, [name]: value })); }; // We'll only update the external data when the input is blurred const onBlur = () => { updateData(index, id, value); }; // If the initialValue is changed external, sync it up with our state React.useEffect(() => { setValue(initialValue); }, [initialValue]); return ( <div style={{ display: 'flex' }}> <Input css={{ marginRight: 8 }} aria-label="age" name="title" value={value.title} onChange={onChange} onBlur={onBlur} /> <Input aria-label="age" name="team" value={value.team} onChange={onChange} onBlur={onBlur} /> </div> ); }; const EditableCheckboxCell = ({ value: initialValue, row: { index }, column: { id }, updateData }) => { // We need to keep and update the state of the cell normally const [value, setValue] = React.useState(initialValue); const onChange = (e) => { setValue(e.target.checked); updateData(index, id, e.target.checked); }; // If the initialValue is changed external, sync it up with our state React.useEffect(() => { setValue(initialValue); }, [initialValue]); return <Checkbox aria-label="job" checked={value} onChange={onChange} />; }; const EditableComboBoxCell = ({ value: initialValue, row: { index }, column: { id }, updateData }) => { const options = [ { value: 'notDefined', label: 'Not defined' }, { value: 'female', label: 'Female' }, { value: 'male', label: 'Male' } ]; // We need to keep and update the state of the cell normally const [value, setValue] = React.useState({ label: initialValue, value: initialValue }); // We'll only update the external data when the input is blurred const onBlur = () => { updateData(index, id, value.value); }; // If the initialValue is changed external, sync it up with our state React.useEffect(() => { const updatedValue = { label: initialValue, value: initialValue }; setValue(updatedValue); }, [initialValue]); return ( <ComboBox aria-label="Gender" options={options} value={value} placeholder="Gender" onChange={(value) => setValue(value)} onBlur={onBlur} /> ); }; const columns = [ { Header: 'Name', accessor: 'name', Cell: InputCell, isEditable: true }, { Header: 'Gender', accessor: 'gender', Cell: EditableComboBoxCell, isEditable: true }, { Header: 'Job', accessor: (row) => row.job, id: 'job', // You need to define a unique id when you use the accessor as a function Cell: JobCell, isEditable: true, width: 300 }, { Header: 'City', accessor: 'city', Cell: SegmentedButtonCell, isEditable: true, width: 320 }, { Header: 'Is Active', accessor: 'isActive', Cell: EditableCheckboxCell, isEditable: true } ]; const initData = [ { name: 'Name_1', age: 36, gender: 'notDefined', city: 'berlin', job: { title: 'job_title_1', team: 'team_1' }, isActive: true }, { name: 'Name_2', age: 29, gender: 'male', city: 'paris', job: { title: 'job_title_2', team: 'team_2' }, isActive: false }, { name: 'Name_3', age: 30, gender: 'female', city: 'moscow', job: { title: 'job_title_3', team: 'team_3' }, isActive: true }, { name: 'Name_4', age: 28, gender: 'notDefined', city: 'berlin', job: { title: 'job_title_4', team: 'team_4' }, isActive: false }, { name: 'Name_5', age: 35, gender: 'female', city: 'paris', job: { title: 'job_title_5', team: 'team_5' }, isActive: true }, { name: 'Name_6', age: 32, gender: 'male', city: 'berlin', job: { title: 'job_title_6', team: 'team_6' }, isActive: true } ]; const [data, setData] = React.useState(initData); // When our cell renderer calls updateData, we'll use // the rowIndex, columnId and new value to update the // original data const updateData = (rowIndex, columnId, value) => { setData((old) => old.map((row, index) => { if (index === rowIndex) { return { ...old[rowIndex], [columnId]: value }; } return row; }) ); }; return ( <TableV2 data={data} updateData={updateData} columns={columns} height={200} /> ); }

function MyTable() {
  const InputCell = ({
    value: initialValue,
    row: { index },
    column: { id },
    updateData
  }) => {
    // We need to keep and update the state of the cell normally
    const [value, setValue] = React.useState(initialValue);

    const onChange = (e) => {
      setValue(e.target.value);
    };

    // We'll only update the external data when the input is blurred
    const onBlur = () => {
      updateData(index, id, value);
    };

    // If the initialValue is changed external, sync it up with our state
    React.useEffect(() => {
      setValue(initialValue);
    }, [initialValue]);

    return (
      <Input
        aria-label="age"
        value={value}
        onChange={onChange}
        onBlur={onBlur}
      />
    );
  };

  const SegmentedButtonCell = ({
    value: initialValue,
    row: { index },
    column: { id },
    updateData
  }) => {
    const cities = [
      { value: 'shanghai', label: 'Shanghai' },
      { value: 'moscow', label: 'Moscow' },
      { value: 'berlin', label: 'Berlin' },
      { value: 'paris', label: 'Paris' }
    ];
    // We need to keep and update the state of the cell normally
    const [value, setValue] = React.useState(initialValue);

    const onChange = (e) => {
      const updatedValue = e.target.value;
      setValue(updatedValue);
      updateData(index, id, updatedValue);
    };

    // If the initialValue is changed external, sync it up with our state
    React.useEffect(() => {
      setValue(initialValue);
    }, [initialValue]);

    return <SegmentedButton items={cities} value={value} onChange={onChange} />;
  };

  const JobCell = ({
    value: initialValue,
    row: { index },
    column: { id },
    updateData
  }) => {
    // We need to keep and update the state of the cell normally
    const [value, setValue] = React.useState(initialValue);

    const onChange = (e) => {
      const { name, value } = e.target;
      setValue((prevState) => ({
        ...prevState,
        [name]: value
      }));
    };

    // We'll only update the external data when the input is blurred
    const onBlur = () => {
      updateData(index, id, value);
    };

    // If the initialValue is changed external, sync it up with our state
    React.useEffect(() => {
      setValue(initialValue);
    }, [initialValue]);

    return (
      <div style={{ display: 'flex' }}>
        <Input
          css={{ marginRight: 8 }}
          aria-label="age"
          name="title"
          value={value.title}
          onChange={onChange}
          onBlur={onBlur}
        />
        <Input
          aria-label="age"
          name="team"
          value={value.team}
          onChange={onChange}
          onBlur={onBlur}
        />
      </div>
    );
  };

  const EditableCheckboxCell = ({
    value: initialValue,
    row: { index },
    column: { id },
    updateData
  }) => {
    // We need to keep and update the state of the cell normally
    const [value, setValue] = React.useState(initialValue);

    const onChange = (e) => {
      setValue(e.target.checked);
      updateData(index, id, e.target.checked);
    };

    // If the initialValue is changed external, sync it up with our state
    React.useEffect(() => {
      setValue(initialValue);
    }, [initialValue]);

    return <Checkbox aria-label="job" checked={value} onChange={onChange} />;
  };

  const EditableComboBoxCell = ({
    value: initialValue,
    row: { index },
    column: { id },
    updateData
  }) => {
    const options = [
      { value: 'notDefined', label: 'Not defined' },
      { value: 'female', label: 'Female' },
      { value: 'male', label: 'Male' }
    ];
    // We need to keep and update the state of the cell normally
    const [value, setValue] = React.useState({
      label: initialValue,
      value: initialValue
    });
    // We'll only update the external data when the input is blurred
    const onBlur = () => {
      updateData(index, id, value.value);
    };

    // If the initialValue is changed external, sync it up with our state
    React.useEffect(() => {
      const updatedValue = { label: initialValue, value: initialValue };
      setValue(updatedValue);
    }, [initialValue]);

    return (
      <ComboBox
        aria-label="Gender"
        options={options}
        value={value}
        placeholder="Gender"
        onChange={(value) => setValue(value)}
        onBlur={onBlur}
      />
    );
  };

  const columns = [
    {
      Header: 'Name',
      accessor: 'name',
      Cell: InputCell,
      isEditable: true
    },
    {
      Header: 'Gender',
      accessor: 'gender',
      Cell: EditableComboBoxCell,
      isEditable: true
    },
    {
      Header: 'Job',
      accessor: (row) => row.job,
      id: 'job', // You need to define a unique id when you use the accessor as a function
      Cell: JobCell,
      isEditable: true,
      width: 300
    },
    {
      Header: 'City',
      accessor: 'city',
      Cell: SegmentedButtonCell,
      isEditable: true,
      width: 320
    },
    {
      Header: 'Is Active',
      accessor: 'isActive',
      Cell: EditableCheckboxCell,
      isEditable: true
    }
  ];

  const initData = [
    {
      name: 'Name_1',
      age: 36,
      gender: 'notDefined',
      city: 'berlin',
      job: {
        title: 'job_title_1',
        team: 'team_1'
      },
      isActive: true
    },
    {
      name: 'Name_2',
      age: 29,
      gender: 'male',
      city: 'paris',
      job: {
        title: 'job_title_2',
        team: 'team_2'
      },
      isActive: false
    },
    {
      name: 'Name_3',
      age: 30,
      gender: 'female',
      city: 'moscow',
      job: {
        title: 'job_title_3',
        team: 'team_3'
      },
      isActive: true
    },
    {
      name: 'Name_4',
      age: 28,
      gender: 'notDefined',
      city: 'berlin',
      job: {
        title: 'job_title_4',
        team: 'team_4'
      },
      isActive: false
    },
    {
      name: 'Name_5',
      age: 35,
      gender: 'female',
      city: 'paris',
      job: {
        title: 'job_title_5',
        team: 'team_5'
      },
      isActive: true
    },
    {
      name: 'Name_6',
      age: 32,
      gender: 'male',
      city: 'berlin',
      job: {
        title: 'job_title_6',
        team: 'team_6'
      },
      isActive: true
    }
  ];
  const [data, setData] = React.useState(initData);
  // When our cell renderer calls updateData, we'll use
  // the rowIndex, columnId and new value to update the
  // original data
  const updateData = (rowIndex, columnId, value) => {
    setData((old) =>
      old.map((row, index) => {
        if (index === rowIndex) {
          return {
            ...old[rowIndex],
            [columnId]: value
          };
        }
        return row;
      })
    );
  };
  return (
    <TableV2 data={data} updateData={updateData} columns={columns} height={200} />
  );
}

Result

Loading...

Loading More Data (aka Infinite loading)

Table supports infinite loading by calling onLoadMoreData callback when Table gets scrolled to the end. To integrate infinite loading with React Query please refer to useInfiniteQuery hook and this example.

Live Editor

function MyTable() { const generateMoreData = useCallback( (offset = 0, chunkSize = 25) => Array.from({ length: chunkSize }, (_, index) => { const id = offset + index + 1; return { firstName: `firstName_${id}`, lastName: `lastName_${id}`, points: id }; }), [] ); const initialData = useMemo(() => generateMoreData(), [generateMoreData]); const [data, setData] = useState(initialData); const dataLength = data.length; const [isLoadingMoreData, setIsLoadingMoreData] = useState(false); const columns = useMemo( () => [ { Header: 'First Name', accessor: 'firstName' }, { Header: 'Last Name', accessor: 'lastName', width: 300, Cell: ({ value }) => <Badge label={value} /> }, { Header: 'Points', accessor: 'points', align: 'right' } ], [] ); const onLoadMoreData = useCallback(() => { setIsLoadingMoreData(true); setTimeout(() => { const generatedData = generateMoreData(dataLength); setData((initialData) => [...initialData, ...generatedData]); setIsLoadingMoreData(false); }, 3000); }, [dataLength, generateMoreData]); const maxNumberOrRows = 200; return ( <TableV2 data={data} columns={columns} hasMoreData={dataLength <= maxNumberOrRows} isLoadingMoreData={isLoadingMoreData} onLoadMoreData={onLoadMoreData} height={400} /> ); }

function MyTable() {
  const generateMoreData = useCallback(
    (offset = 0, chunkSize = 25) =>
      Array.from({ length: chunkSize }, (_, index) => {
        const id = offset + index + 1;

        return {
          firstName: `firstName_${id}`,
          lastName: `lastName_${id}`,
          points: id
        };
      }),
    []
  );

  const initialData = useMemo(() => generateMoreData(), [generateMoreData]);

  const [data, setData] = useState(initialData);
  const dataLength = data.length;

  const [isLoadingMoreData, setIsLoadingMoreData] = useState(false);

  const columns = useMemo(
    () => [
      {
        Header: 'First Name',
        accessor: 'firstName'
      },
      {
        Header: 'Last Name',
        accessor: 'lastName',
        width: 300,
        Cell: ({ value }) => <Badge label={value} />
      },
      {
        Header: 'Points',
        accessor: 'points',
        align: 'right'
      }
    ],
    []
  );

  const onLoadMoreData = useCallback(() => {
    setIsLoadingMoreData(true);
    setTimeout(() => {
      const generatedData = generateMoreData(dataLength);

      setData((initialData) => [...initialData, ...generatedData]);
      setIsLoadingMoreData(false);
    }, 3000);
  }, [dataLength, generateMoreData]);

  const maxNumberOrRows = 200;

  return (
      <TableV2
        data={data}
        columns={columns}
        hasMoreData={dataLength <= maxNumberOrRows}
        isLoadingMoreData={isLoadingMoreData}
        onLoadMoreData={onLoadMoreData}
        height={400}
      />
  );
}

Result

Loading...

Loading State

You can active a loading state for the table by passing isLoading to be true. This helps users to see a skeleton cell when data is loading.

Also the loader height adapts to the typeScales of cellTypeScale and width is random, and also adapts the column alignments.

Live Editor

function MyTable() { const columns = [ { Header: 'First', accessor: 'firstName' }, { Header: 'Last', accessor: 'lastName' } ]; const data = [ { firstName: 'firstName_1', lastName: 'lastName_1' }, { firstName: 'firstName_2', lastName: 'lastName_2' } ]; return <TableV2 data={data} columns={columns} isLoading />; }

function MyTable() {
  const columns = [
    {
      Header: 'First',
      accessor: 'firstName'
    },
    {
      Header: 'Last',
      accessor: 'lastName'
    }
  ];
  const data = [
    {
      firstName: 'firstName_1',
      lastName: 'lastName_1'
    },
    {
      firstName: 'firstName_2',
      lastName: 'lastName_2'
    }
  ];

  return <TableV2 data={data} columns={columns} isLoading />;
}

Result

Loading...

Min and Max width

The table supports a custom minimum width option for desired columns. You can use the minWidth property for each column to change the minimum width value. If you do not use the minWidth property for the column, column will take the minWidth 150px width value by default.

The table supports a custom maximum width option for desired columns. You can use the maxWidth property for each column to change the maximum width value. If you do not use the maxWidth property for the column, column will take the maxWidth 500px width value by default.

Live Editor

function MyTable() { const columns = [ { Header: 'First Name', accessor: 'firstName', minWidth: 600 }, { Header: 'Last Name', accessor: 'lastName', maxWidth: 200 } ]; const data = [ { firstName: 'Just a name', lastName: 'Last name 1' }, { firstName: 'Very very very long name', lastName: 'Last name 2' }, { firstName: 'Random name', lastName: 'Last name 3' } ]; return <TableV2 data={data} columns={columns} />; }

function MyTable() {
  const columns = [
    {
      Header: 'First Name',
      accessor: 'firstName',
      minWidth: 600
    },
    {
      Header: 'Last Name',
      accessor: 'lastName',
      maxWidth: 200
    }
  ];

  const data = [
    {
      firstName: 'Just a name',
      lastName: 'Last name 1'
    },
    {
      firstName: 'Very very very long name',
      lastName: 'Last name 2'
    },
    {
      firstName: 'Random name',
      lastName: 'Last name 3'
    }
  ];

  return <TableV2 data={data} columns={columns} />;
}

Result

Loading...

Nested Rows

You can have nested rows by adding subRows to data as the following example.

You can use the following callbacks to customize toggle in expandable rows by passing them to the Cell render prop .

• toggleRowExpanded(rowId, isExpanded?): toggle a specific row.
• toggleAllRowsExpanded(isExpanded?): toggle all rows.

You can add prop autoResetExpanded to component to allow the expanded state to automatically reset if data changes, default is false.

Live Editor

function MyTable() { const [data, setData] = useState([ { firstName: '', lastName: '', age: '', job: '' }, { firstName: 'firstName_1', lastName: 'lastName_1', age: 36, job: { title: 'job_title_1' }, subRows: [ { firstName: 'sub firstName_1', lastName: 'sub lastName_1', job: { title: 'sub job_title_1' } }, { firstName: 'sub firstName_2', lastName: 'sub lastName_2', age: 306, job: { title: 'sub job_title_2' }, subRows: [ { firstName: 'sub firstName_2_1', lastName: 'sub lastName_2_1', job: { title: 'sub job_title_2_1' } }, { firstName: 'firstName_2_2', lastName: 'lastName_2_2', job: { title: 'job_title_2_2' }, subRows: [ { firstName: 'last firstName_1', lastName: 'last lastName_1', job: { title: 'last job_title_1' } }, { firstName: 'last firstName_2', lastName: 'last lastName_2', job: { title: 'last job_title_2' } }, { firstName: 'last firstName_3', lastName: 'last lastName_3', job: { title: 'last job_title_3' } }, ] } ] }, { firstName: 'sub firstName_3', lastName: 'sub lastName_3', job: { title: 'sub job_title_3' } } ] }, { firstName: 'firstName_2', lastName: 'lastName_2', age: 36, job: { title: 'job_title_2' }, subRows: [ { firstName: 'sub firstName_2', lastName: 'sub lastName_2', job: { title: 'sub job_title_2' } }, { firstName: 'sub firstName_2', lastName: 'sub lastName_2', age: 306, job: { title: 'sub job_title_2' } } ] }, { firstName: 'firstName_3', lastName: 'lastName_3', age: 28, job: { title: 'job_title_3' }, subRows: [ { firstName: 'sub firstName_3_1', lastName: 'sub lastName_3_1', job: { title: 'sub job_title_3_1' } }, { firstName: 'sub firstName_3_2', lastName: 'sub lastName_3_2', job: { title: 'sub job_title_3_2' } } ] }, { firstName: 'firstName_4', lastName: 'lastName_4', age: 48, job: { title: 'job_title_4' }, } ]); const columns = [ { Header: 'First Name', accessor: 'firstName', minWidth: 220 }, { Header: 'Last Name', accessor: 'lastName' }, { Header: 'Age', accessor: 'age', align: 'left' }, { Header: 'Job', accessor: (rows) => rows.job.title, id: 'title' }, { Header: 'Action', accessor: '-', Cell: ({ row, toggleRowExpanded, toggleAllRowsExpanded }) => { if (row.index === 0 && row.depth === 0) { return (<Button label="Toggle All" onClick={() => { toggleAllRowsExpanded(); }} />) } return row.depth === 0 ? ( <Button label="Collapse" onClick={() => { toggleRowExpanded(row.id, false); }} /> ) : null; } } ]; const visualPropertiesStripe = { isStriped: true, areColumnsBordered: true }; return ( <TableV2 height={300} data={data} columns={columns} visualProperties={visualPropertiesStripe} /> ); }

function MyTable() {
  const [data, setData] = useState([
    {
      firstName: '',
      lastName: '',
      age: '',
      job: ''
    },
    {
      firstName: 'firstName_1',
      lastName: 'lastName_1',
      age: 36,
      job: {
        title: 'job_title_1'
      },
      subRows: [
        {
          firstName: 'sub firstName_1',
          lastName: 'sub lastName_1',
          job: {
            title: 'sub job_title_1'
          }
        },
        {
          firstName: 'sub firstName_2',
          lastName: 'sub lastName_2',
          age: 306,
          job: {
            title: 'sub job_title_2'
          },
          subRows: [
            {
              firstName: 'sub firstName_2_1',
              lastName: 'sub lastName_2_1',
              job: {
                title: 'sub job_title_2_1'
              }
            },
            {
              firstName: 'firstName_2_2',
              lastName: 'lastName_2_2',
              job: {
                title: 'job_title_2_2'
              },
              subRows: [
                {
                  firstName: 'last firstName_1',
                  lastName: 'last lastName_1',
                  job: {
                    title: 'last job_title_1'
                  }
                },
                {
                  firstName: 'last firstName_2',
                  lastName: 'last lastName_2',
                  job: {
                    title: 'last job_title_2'
                  }
                },
                {
                  firstName: 'last firstName_3',
                  lastName: 'last lastName_3',
                  job: {
                    title: 'last job_title_3'
                  }
                },
              ]
            }
          ]
        },
        {
          firstName: 'sub firstName_3',
          lastName: 'sub lastName_3',
          job: {
            title: 'sub job_title_3'
          }
        }
      ]
    },
    {
      firstName: 'firstName_2',
      lastName: 'lastName_2',
      age: 36,
      job: {
        title: 'job_title_2'
      },
      subRows: [
        {
          firstName: 'sub firstName_2',
          lastName: 'sub lastName_2',
          job: {
            title: 'sub job_title_2'
          }
        },
        {
          firstName: 'sub firstName_2',
          lastName: 'sub lastName_2',
          age: 306,
          job: {
            title: 'sub job_title_2'
          }
        }
      ]
    },
    {
      firstName: 'firstName_3',
      lastName: 'lastName_3',
      age: 28,
      job: {
        title: 'job_title_3'
      },
      subRows: [
        {
          firstName: 'sub firstName_3_1',
          lastName: 'sub lastName_3_1',
          job: {
            title: 'sub job_title_3_1'
          }
        },
        {
          firstName: 'sub firstName_3_2',
          lastName: 'sub lastName_3_2',
          job: {
            title: 'sub job_title_3_2'
          }
        }
      ]
    },
    {
      firstName: 'firstName_4',
      lastName: 'lastName_4',
      age: 48,
      job: {
        title: 'job_title_4'
      },
    }
  ]);

  const columns = [
    {
      Header: 'First Name',
      accessor: 'firstName',
      minWidth: 220
    },
    {
      Header: 'Last Name',
      accessor: 'lastName'
    },
    {
      Header: 'Age',
      accessor: 'age',
      align: 'left'
    },
    {
      Header: 'Job',
      accessor: (rows) => rows.job.title,
      id: 'title'
    },
    {
      Header: 'Action',
      accessor: '-',
      Cell: ({ row, toggleRowExpanded, toggleAllRowsExpanded }) => {
        if (row.index === 0 && row.depth === 0) {
          return (<Button
            label="Toggle All"
            onClick={() => {
              toggleAllRowsExpanded();
            }}
          />)
        }
        return row.depth === 0 ? (
          <Button
            label="Collapse"
            onClick={() => {
              toggleRowExpanded(row.id, false);
            }}
          />
        ) : null;
      }
    }
  ];

  const visualPropertiesStripe = {
    isStriped: true,
    areColumnsBordered: true
  };

  return (
    <TableV2
        height={300}
        data={data}
        columns={columns}
        visualProperties={visualPropertiesStripe}
      />
  );
}

Result

Loading...

Nested Rows Indentation

You can add or remove the indentation for the non-expandable rows of the table using isNestedTable prop

Live Editor

function MyTable() { const [data, setData] = useState([ { firstName: '', lastName: '', age: '', job: '' }, { firstName: 'firstName_1', lastName: 'lastName_1', age: 36, job: { title: 'job_title_1' }, subRows: [ { firstName: 'sub firstName_1', lastName: 'sub lastName_1', job: { title: 'sub job_title_1' } }, { firstName: 'sub firstName_2', lastName: 'sub lastName_2', age: 306, job: { title: 'sub job_title_2' }, subRows: [ { firstName: 'sub firstName_2_1', lastName: 'sub lastName_2_1', job: { title: 'sub job_title_2_1' } }, { firstName: 'firstName_2_2', lastName: 'lastName_2_2', job: { title: 'job_title_2_2' }, subRows: [ { firstName: 'last firstName_1', lastName: 'last lastName_1', job: { title: 'last job_title_1' } }, { firstName: 'last firstName_2', lastName: 'last lastName_2', job: { title: 'last job_title_2' } }, { firstName: 'last firstName_3', lastName: 'last lastName_3', job: { title: 'last job_title_3' } }, ] } ] }, { firstName: 'sub firstName_3', lastName: 'sub lastName_3', job: { title: 'sub job_title_3' } } ] }, { firstName: 'firstName_2', lastName: 'lastName_2', age: 36, job: { title: 'job_title_2' }, subRows: [ { firstName: 'sub firstName_2', lastName: 'sub lastName_2', job: { title: 'sub job_title_2' } }, { firstName: 'sub firstName_2', lastName: 'sub lastName_2', age: 306, job: { title: 'sub job_title_2' } } ] }, { firstName: 'firstName_3', lastName: 'lastName_3', age: 28, job: { title: 'job_title_3' }, subRows: [ { firstName: 'sub firstName_3_1', lastName: 'sub lastName_3_1', job: { title: 'sub job_title_3_1' } }, { firstName: 'sub firstName_3_2', lastName: 'sub lastName_3_2', job: { title: 'sub job_title_3_2' } } ] }, { firstName: 'firstName_4', lastName: 'lastName_4', age: 48, job: { title: 'job_title_4' }, } ]); const columns = [ { Header: 'First Name', accessor: 'firstName', minWidth: 220 }, { Header: 'Last Name', accessor: 'lastName' }, { Header: 'Age', accessor: 'age', align: 'left' }, { Header: 'Job', accessor: (rows) => rows.job.title, id: 'title' }, { Header: 'Action', accessor: '-', Cell: ({ row, toggleRowExpanded, toggleAllRowsExpanded }) => { if (row.index === 0 && row.depth === 0) { return (<Button label="Toggle All" onClick={() => { toggleAllRowsExpanded(); }} />) } return row.depth === 0 ? ( <Button label="Collapse" onClick={() => { toggleRowExpanded(row.id, false); }} /> ) : null; } } ]; const visualPropertiesStripe = { isStriped: true, areColumnsBordered: true }; return ( <TableV2 height={300} data={data} columns={columns} visualProperties={visualPropertiesStripe} isNestedTable /> ); }

function MyTable() {
  const [data, setData] = useState([
    {
      firstName: '',
      lastName: '',
      age: '',
      job: ''
    },
    {
      firstName: 'firstName_1',
      lastName: 'lastName_1',
      age: 36,
      job: {
        title: 'job_title_1'
      },
      subRows: [
        {
          firstName: 'sub firstName_1',
          lastName: 'sub lastName_1',
          job: {
            title: 'sub job_title_1'
          }
        },
        {
          firstName: 'sub firstName_2',
          lastName: 'sub lastName_2',
          age: 306,
          job: {
            title: 'sub job_title_2'
          },
          subRows: [
            {
              firstName: 'sub firstName_2_1',
              lastName: 'sub lastName_2_1',
              job: {
                title: 'sub job_title_2_1'
              }
            },
            {
              firstName: 'firstName_2_2',
              lastName: 'lastName_2_2',
              job: {
                title: 'job_title_2_2'
              },
              subRows: [
                {
                  firstName: 'last firstName_1',
                  lastName: 'last lastName_1',
                  job: {
                    title: 'last job_title_1'
                  }
                },
                {
                  firstName: 'last firstName_2',
                  lastName: 'last lastName_2',
                  job: {
                    title: 'last job_title_2'
                  }
                },
                {
                  firstName: 'last firstName_3',
                  lastName: 'last lastName_3',
                  job: {
                    title: 'last job_title_3'
                  }
                },
              ]
            }
          ]
        },
        {
          firstName: 'sub firstName_3',
          lastName: 'sub lastName_3',
          job: {
            title: 'sub job_title_3'
          }
        }
      ]
    },
    {
      firstName: 'firstName_2',
      lastName: 'lastName_2',
      age: 36,
      job: {
        title: 'job_title_2'
      },
      subRows: [
        {
          firstName: 'sub firstName_2',
          lastName: 'sub lastName_2',
          job: {
            title: 'sub job_title_2'
          }
        },
        {
          firstName: 'sub firstName_2',
          lastName: 'sub lastName_2',
          age: 306,
          job: {
            title: 'sub job_title_2'
          }
        }
      ]
    },
    {
      firstName: 'firstName_3',
      lastName: 'lastName_3',
      age: 28,
      job: {
        title: 'job_title_3'
      },
      subRows: [
        {
          firstName: 'sub firstName_3_1',
          lastName: 'sub lastName_3_1',
          job: {
            title: 'sub job_title_3_1'
          }
        },
        {
          firstName: 'sub firstName_3_2',
          lastName: 'sub lastName_3_2',
          job: {
            title: 'sub job_title_3_2'
          }
        }
      ]
    },
    {
      firstName: 'firstName_4',
      lastName: 'lastName_4',
      age: 48,
      job: {
        title: 'job_title_4'
      },
    }
  ]);

  const columns = [
    {
      Header: 'First Name',
      accessor: 'firstName',
      minWidth: 220
    },
    {
      Header: 'Last Name',
      accessor: 'lastName'