Panel Plugin - How to add new field into existing DataFrame

[tanavshetty]

I was following how to build Panel Plugin tutorials. I wanted to build a table from data source “TestData DB” and add an additional column
initial table:
Time Value
2021-03-14 03:42:21 10
2021-03-14 03:45:21 20
2021-03-14 03:48:21 30

I wanted an additional column so added a field. But, I just get the Column name but not the values

Time Value Rate
2021-03-14 03:42:21 10
2021-03-14 03:45:21 20
2021-03-14 03:48:21 30

Code:

export const SimplePanel: React.FC = ({ options, data, width, height }) => {
const styles = getStyles();
var rateField = { name: ‘Rate’, type: FieldType.number, values: [1,2,3,4,5,6] };
var newDataFrame = new MutableDataFrame({
fields: data.series[0].fields,
});
newDataFrame.addField(rateField);

return (
<div
className={cx(
styles.wrapper,
css width: ${width}px; height: ${height}px;
)}
>

  <Table
    data={newDataFrame}
    height={height + 100}
    width={width}
    resizable={true}
  />

</div>

);
};