Hello Everyone
Hope you’re all doing great. I have a quick question regarding react (for which I’m still a total beginner).
I’m building a custom component and its going all right so far however I’m trying to use Base Web’s Data table:
https://baseweb.design/components/data-table/
I’m specifically using the example where rows can be selected actions performed on them. I’ve added a remove row button as well as download selected which works seamlessly. Whenever a row is removed this is fed back to the python backend.
However I cannot seem to access the rows of the table, after they have been filtered with the built in filter function. And on top of that, not all columns seems to be added to the available filters.
It simply returns all of the original rows when a filter is applied.
I would be immensely grateful if someone would be able to tell me how to access the displayed rows after filtering as well as allow filters on all columns as I havn’t found the Base Web docs of much help (they simply guide you to the github code, for which my React and Typescript experience aren’t sufficient).
I’ve pasted my React component file below:
import {
Streamlit,
withStreamlitConnection,
ComponentProps
} from "streamlit-component-lib";
import React, { useEffect } from "react";
import { Hide } from 'baseui/icon';
import {
StatefulDataTable,
BooleanColumn,
CategoricalColumn,
NumericalColumn,
StringColumn,
DatetimeColumn
} from 'baseui/data-table';
const FilterTable = (props: ComponentProps) => {
const colnames = Object.keys(props.args["cols"])
const coltypes = Object.values(props.args["cols"])
let data: any;
data = Object.values(props.args["rows"]);
data.forEach((o, i) => o.id = i + 1);
interface col {
title: string;
}
let columns: col[];
columns = [];
for (let i = 0; i < colnames.length; i++) {
switch (coltypes[i]) {
case 'datetime':
columns.push(DatetimeColumn({
title: colnames[i],
mapDataToValue: (data: any) => data[i],
}))
break;
case 'string':
columns.push(StringColumn({
title: colnames[i],
mapDataToValue: (data: string) => data[i],
}))
break;
case 'int':
columns.push(NumericalColumn({
title: colnames[i],
mapDataToValue: (data: number) => data[i],
}))
break;
case 'float':
columns.push(NumericalColumn({
title: colnames[i],
precision: 2,
mapDataToValue: (data: number) => data[i],
}))
break;
case 'categorical':
columns.push(CategoricalColumn({
title: colnames[i],
mapDataToValue: (data: string) => data[i],
}))
break;
case 'boolean':
columns.push(BooleanColumn({
title: colnames[i],
mapDataToValue: (data: boolean) => data[i],
}))
break;
}
}
const rowdata = data.map(r => ({ id: r.id, data: r }))
const [rows, setRows] = React.useState(rowdata);
// Remove rows with input ids from being displayed in the table
function removeRows(ids) {
const nextRows = rows.filter(row => !ids.includes(row.id));
setRows(nextRows);
}
// Remove a row by passing the id to removeRows
function removeRow(id) {
removeRows([id]);
}
// Actions to be performed on a selection of rows ( a batch )
const batchActions = [
{
label: 'Remove',
onClick: ({ selection, clearSelection }) => {
removeRows(selection.map(r => r.id));
clearSelection();
},
renderIcon: ({ size }) => <Hide size={size} />,
},
{
label: 'Download',
onClick: ({ selection, clearSelection }) => {
Streamlit.setComponentValue([1,selection.map(r => r.data)])
clearSelection(); }
},
];
// Actions to be performed on individual rows
const rowActions = [
{
label: 'Hide',
onClick: ({ row }) => removeRow(row.id),
renderIcon: ({ size }) => <Hide size={size} />,
},
];
// useEffect is a specific React hook which calls its input after the component has been rendered on the browser.
// The callback function properly sets the height of the HTML block wrapping the component. By default it checks the scrollable height of the returned block after rendering and sets it as the iframe height.
useEffect(() => {
Streamlit.setFrameHeight()},[rows]);
//const rootElement = document.getElementById("root");
return (
<div style={{height: '600px'}}>
<StatefulDataTable
batchActions={batchActions}
rowActions={rowActions}
columns={columns}
rows={rows}
onSelectionChange={Streamlit.setComponentValue([0,rows.map(r => r.data)])}
/>
</div>
);
}
export default withStreamlitConnection(FilterTable)