interface Layout {  autosize?: boolean;  automargin?: boolean;  width?: number;  height?: number;  margin?: Margins;  paper_bgcolor?: string;  plot_bgcolor?: string;  showlegend?: boolean;  legend?: Legend;  title?: Title;  xaxis?: XAxis;  yaxis?: YAxis;  barmode?: string;  bargap?: number;  bargroupgap?: number;  boxmode?: string;  boxgap?: number;  boxgroupgap?: number;  hovermode?: string;  hoverlabel?: Hoverlabel;  hoverdistance?: number;  hoverinfo?: string;  hoverlabels?: Hoverlabels;  hoverrecalculate?: boolean;  mapbox?: Mapbox;  geo?: Geo;  images?: Array<Image>;  shapes?: Array<Shape>;  annotations?: Array<Annotation>;  angularaxis?: Angularaxis;  coloraxis?: Coloraxis;  radialaxis?: Radialaxis;  scene?: Scene;  sliders?: Array<Slider>;  sunburst?: Sunburst;  ternary?: Ternary;  waterfall?: Waterfall;  [key: string]: any;}

interface Config {  displaylogo?: boolean;  doubleClickDelay?: number;  editable?: boolean;  scrollZoom?: boolean;  modeBarButtonsToAdd?: Array<ModeBarButton>;  modeBarButtonsToRemove?: Array<string>;  modeBarButtonsToToggle?: Array<string>;  staticPlot?: boolean;  displayModeBar?: boolean;  watermark?: Watermark;  responsive?: boolean;  toImageButtonOptions?: ToImageButtonOptions;  showTips?: boolean;  sendData?: boolean;  plotlyServerURL?: string;  edits?: Edits;  linkText?: string;  locale?: string;  [key: string]: any;}

const DataTable: FunctionComponent = ():ReactElement =>{  const [is_table_populated, setTableisPolulated] = useState<boolean>(true)  const {dataframe} = useContext(DataContext)  const headerStyle = {      align: "center",      fill: { color: ['lightgrey'] },      font: { family: "Arial", size: 15, color: "black" },          }    const cellStyle = {      align: ["center"],      line: { color: "black", width: 1 }    }  useEffect(()=>{      if (dataframe.size > 0){          setTableisPolulated(true)          dataframe.plot('table_plot_area').table({              config: {                tableHeaderStyle: headerStyle,                tableCellStyle: cellStyle,                              },              layout: {                // title: "Table displaying the Titanic dataset",                automargin: true,                margin: {t:0,r:0,b:0,l:0},                paper_bgcolor: 'gray'              }            })      }else{          setTableisPolulated(false)      }  },[dataframe])  return (      <div className='static-table'>          <div className={classNames("block",{'h-96': is_table_populated })} id='table_plot_area'></div>      </div>  )};export default DataTable