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 ....