How to Change the Styling of Table when using dataframe.plot('table_plot_area').table()

[RahulDas-dev]

Here is My table

I want style the table little bit , may be changing background color, and margin, but not able to locate the proper layout and config ,

I can see it takes a plotconfig object , but able to figureout the same in docs

Kindly help.

[RahulDas-dev]

OK , I manage to find the answer ,

The Layout Type Defination

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;
}

The Config Type Defination

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;
}

Here is my code for adjusting margins

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

[RahulDas-dev]

Closing ....