hunk.code_window: }
   const TableHeader = (props: TableHeaderProps) => {
     return (
       <TableHeaderWrapper>
         <SearchComponent
           value={props.searchKey}
           placeholder="Search..."
           onSearch={props.searchTableData}
         />
  
hunk.labels: keep keep keep keep replace keep keep keep keep keep
hunk.after_edit:     <TableHeaderWrapper
         serverSidePaginationEnabled={props.serverSidePaginationEnabled}
         width={props.width}
       >
  
hunk.file_path: app/client/src/components/designSystems/appsmith/TableHeader.tsx
hunk.type: replace
file: import BaseTable, { Column } from "react-base-table";
  import styled from "styled-components";
  import React from "react";
  import { noop } from "utils/AppsmithUtils";
  
  const RowLoader = styled.div`
    height: 16px !important;
    width: 100%;
    margin: 0 15px;
  `;
  
  const Row = (props: any) => (
    <div {...props}>
      <RowLoader className={"bp3-skeleton"} />
    </div>
  );
  
  const rowProps = ({ rowData }: { rowData: { isLoading: boolean } }) => {
    return rowData.isLoading ? { tagName: Row } : undefined;
  };
  
  const StyledTable = styled(BaseTable)`
    .row-selected {
      background-color: ${props =>
        props.theme.widgets.tableWidget.selectHighlightColor};
    }
  `;
  
  export interface Column {
    key: string;
    dataKey: string;
    title: string;
    width: number;
  }
  
  export interface ReactBaseTableProps {
    width: number;
    height: number;
    columns: Column[];
    data: object[];
    maxHeight: number;
    selectedRowIndex?: number;
  }
  
  export interface SelectableTableProps extends ReactBaseTableProps {
    onRowClick: (rowData: object, rowIndex: number) => void;
    isLoading: boolean;
  }
  
  export default class SelectableTable extends React.PureComponent<
    SelectableTableProps
  > {
    static defaultProps = {};
  
    _onClick = ({ rowData, rowIndex }: { rowData: object; rowIndex: number }) => {
      if (this.props.selectedRowIndex !== rowIndex) {
        this.props.onRowClick(rowData, rowIndex);
      }
    };
  
    _rowClassName = ({ rowIndex }: { rowIndex: number }) => {
      const { selectedRowIndex } = this.props;
      const className = selectedRowIndex === rowIndex ? "row-selected" : "";
      return className;
    };
  
    render() {
      const { data, isLoading, ...rest } = this.props;
      const dataWithLoadingState = data.map(rowData => {
        return {
          ...rowData,
          isLoading,
        };
      });
      return (
        <StyledTable
          {...rest}
          data={dataWithLoadingState}
          rowClassName={this._rowClassName}
          rowEventHandlers={{
            onClick: this._onClick,
          }}
          rowProps={rowProps}
        />
      );
    }
  }
  
  SelectableTable.defaultProps = {
    ...BaseTable.defaultProps,
    onRowSelect: noop,
    isLoading: false,
    onSelectedRowsChange: noop,
  };
  