File size: 1,639 Bytes
53f091c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
import { Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React from 'react';
type TranslationTableRow = {
key: string;
[language: string]: string;
};
interface TranslationTableProps {
data: TranslationTableRow[];
languages: string[];
}
const TranslationTable: React.FC<TranslationTableProps> = ({
data,
languages,
}) => {
// Define columns dynamically based on languages
const columns: ColumnsType<TranslationTableRow> = [
{
title: 'Key',
dataIndex: 'key',
key: 'key',
fixed: 'left',
width: 200,
sorter: (a, b) => a.key.localeCompare(b.key), // Sorting by key
},
...languages.map((lang) => ({
title: lang,
dataIndex: lang,
key: lang,
sorter: (a: any, b: any) => a[lang].localeCompare(b[lang]), // Sorting by language
// Example filter for each language
filters: [
{
text: 'Show Empty',
value: 'show_empty',
},
{
text: 'Show Non-Empty',
value: 'show_non_empty',
},
],
onFilter: (value: any, record: any) => {
if (value === 'show_empty') {
return !record[lang]; // Show rows with empty translations
}
if (value === 'show_non_empty') {
return record[lang] && record[lang].length > 0; // Show rows with non-empty translations
}
return true;
},
})),
];
return (
<Table
columns={columns}
dataSource={data}
rowKey="key"
pagination={{ pageSize: 10 }}
scroll={{ x: true }}
/>
);
};
export default TranslationTable;
|