feat: custom render is added int he query table (#3195)

This commit is contained in:
Palash Gupta 2023-07-25 15:45:51 +05:30 committed by GitHub
parent 55f49c38c7
commit 59deac01bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 3 deletions

View File

@ -13,4 +13,5 @@ export type QueryTableProps = Omit<
query: Query;
renderActionCell?: (record: RowData) => ReactNode;
modifyColumns?: (columns: ColumnsType<RowData>) => ColumnsType<RowData>;
renderColumnCell?: Record<string, (record: RowData) => ReactNode>;
};

View File

@ -9,6 +9,7 @@ export function QueryTable({
query,
renderActionCell,
modifyColumns,
renderColumnCell,
...props
}: QueryTableProps): JSX.Element {
const { columns, dataSource } = useMemo(
@ -17,8 +18,9 @@ export function QueryTable({
query,
queryTableData,
renderActionCell,
renderColumnCell,
}),
[query, queryTableData, renderActionCell],
[query, queryTableData, renderColumnCell, renderActionCell],
);
const filteredColumns = columns.filter((item) => item.key !== 'timestamp');

View File

@ -15,7 +15,7 @@ import { v4 as uuid } from 'uuid';
type CreateTableDataFromQueryParams = Pick<
QueryTableProps,
'queryTableData' | 'query' | 'renderActionCell'
'queryTableData' | 'query' | 'renderActionCell' | 'renderColumnCell'
>;
export type RowData = {
@ -347,6 +347,7 @@ const generateData = (
const generateTableColumns = (
dynamicColumns: DynamicColumns,
renderColumnCell?: QueryTableProps['renderColumnCell'],
): ColumnsType<RowData> => {
const columns: ColumnsType<RowData> = dynamicColumns.reduce<
ColumnsType<RowData>
@ -355,6 +356,7 @@ const generateTableColumns = (
dataIndex: item.key,
key: item.key,
title: item.title,
render: renderColumnCell && renderColumnCell[item.key],
// sorter: item.sortable
// ? (a: RowData, b: RowData): number =>
// (a[item.key] as number) - (b[item.key] as number)
@ -371,6 +373,7 @@ export const createTableColumnsFromQuery: CreateTableDataFromQuery = ({
query,
queryTableData,
renderActionCell,
renderColumnCell,
}) => {
const dynamicColumns = getDynamicColumns(queryTableData, query);
@ -381,7 +384,7 @@ export const createTableColumnsFromQuery: CreateTableDataFromQuery = ({
const dataSource = generateData(filledDynamicColumns, rowsLength);
const columns = generateTableColumns(filledDynamicColumns);
const columns = generateTableColumns(filledDynamicColumns, renderColumnCell);
const actionsCell: ColumnType<RowData> | null = renderActionCell
? {