mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-23 17:08:34 +00:00
feat: Introduce table styles property to set the casing of table column names (#11424)
* feat: Introduce table styles property to set the casing of table column names * Update table default data keys * Fix
This commit is contained in:
Nakul Nagargade
GitHub
parent
022e554812
commit
c3b14dac27
6 changed files with 54 additions and 0 deletions
|
|
@ -310,6 +310,16 @@ export const tableConfig = {
|
|||
{ displayName: 'Wrap', value: 'wrap' },
|
||||
],
|
||||
},
|
||||
headerCasing: {
|
||||
type: 'switch',
|
||||
displayName: 'Header casing',
|
||||
validation: { schema: { type: 'string' } },
|
||||
accordian: 'Data',
|
||||
options: [
|
||||
{ displayName: 'AA', value: 'uppercase' },
|
||||
{ displayName: 'As typed', value: 'none' },
|
||||
],
|
||||
},
|
||||
tableType: {
|
||||
type: 'select',
|
||||
displayName: 'Row style',
|
||||
|
|
@ -529,6 +539,7 @@ export const tableConfig = {
|
|||
value: [
|
||||
{
|
||||
name: 'id',
|
||||
key: 'id',
|
||||
id: 'e3ecbf7fa52c4d7210a93edb8f43776267a489bad52bd108be9588f790126737',
|
||||
autogenerated: true,
|
||||
fxActiveFields: [],
|
||||
|
|
@ -548,6 +559,7 @@ export const tableConfig = {
|
|||
},
|
||||
{
|
||||
name: 'name',
|
||||
key: 'name',
|
||||
id: '5d2a3744a006388aadd012fcc15cc0dbcb5f9130e0fbb64c558561c97118754a',
|
||||
autogenerated: true,
|
||||
fxActiveFields: [],
|
||||
|
|
@ -556,6 +568,7 @@ export const tableConfig = {
|
|||
},
|
||||
{
|
||||
name: 'email',
|
||||
key: 'email',
|
||||
id: 'afc9a5091750a1bd4760e38760de3b4be11a43452ae8ae07ce2eebc569fe9a7f',
|
||||
autogenerated: true,
|
||||
fxActiveFields: [],
|
||||
|
|
@ -564,6 +577,7 @@ export const tableConfig = {
|
|||
},
|
||||
{
|
||||
name: 'date',
|
||||
key: 'date',
|
||||
id: '27b75c8af9d34d1eaa1f9bb7f8f9f7b0abf1823e799748c8bb57e74f53b2c1dc',
|
||||
autogenerated: true,
|
||||
fxActiveFields: [],
|
||||
|
|
@ -576,6 +590,7 @@ export const tableConfig = {
|
|||
},
|
||||
{
|
||||
name: 'mobile_number',
|
||||
key: 'mobile_number',
|
||||
id: '9c2e3c40572a4aefb8e179ee39a0e1ac9dc2b2e6634be56e1c05be13c3d1de56',
|
||||
autogenerated: true,
|
||||
fxActiveFields: [],
|
||||
|
|
@ -652,6 +667,7 @@ export const tableConfig = {
|
|||
styles: {
|
||||
textColor: { value: '#000' },
|
||||
columnHeaderWrap: { value: 'fixed' },
|
||||
headerCasing: { value: 'uppercase' },
|
||||
actionButtonRadius: { value: '0' },
|
||||
cellSize: { value: 'regular' },
|
||||
borderRadius: { value: '8' },
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ export const TableHeader = ({
|
|||
columnHeaderWrap,
|
||||
setResizingColumnId,
|
||||
resizingColumnId,
|
||||
headerCasing,
|
||||
}) => {
|
||||
const calculateWidthOfActionColumnHeader = (position) => {
|
||||
let totalWidth = null;
|
||||
|
|
@ -193,6 +194,7 @@ export const TableHeader = ({
|
|||
'text-truncate': getResolvedValue(columnHeaderWrap) === 'fixed',
|
||||
'wrap-wrapper': getResolvedValue(columnHeaderWrap) === 'wrap',
|
||||
})}
|
||||
style={{ textTransform: headerCasing === 'uppercase' ? 'uppercase' : 'none' }}
|
||||
>
|
||||
{column.render('Header')}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -135,6 +135,7 @@ export const Table = React.memo(
|
|||
borderColor,
|
||||
isMaxRowHeightAuto,
|
||||
columnHeaderWrap,
|
||||
headerCasing,
|
||||
} = loadPropertiesAndStyles(properties, styles, darkMode);
|
||||
const updatedDataReference = useRef([]);
|
||||
const preSelectRow = useRef(false);
|
||||
|
|
@ -1096,6 +1097,7 @@ export const Table = React.memo(
|
|||
columnHeaderWrap={columnHeaderWrap}
|
||||
setResizingColumnId={setResizingColumnId}
|
||||
resizingColumnId={resizingColumnId}
|
||||
headerCasing={headerCasing}
|
||||
/>
|
||||
{page.length > 0 && !loadingState && (
|
||||
<tbody
|
||||
|
|
|
|||
|
|
@ -83,6 +83,7 @@ export default function loadPropertiesAndStyles(properties, styles, darkMode) {
|
|||
const contentWrapProperty = styles?.contentWrap ?? true;
|
||||
const borderColor = styles?.borderColor ?? 'var(--borders-weak-disabled)';
|
||||
const columnHeaderWrap = styles?.columnHeaderWrap ?? 'fixed';
|
||||
const headerCasing = styles?.headerCasing ?? 'uppercase';
|
||||
|
||||
return {
|
||||
color,
|
||||
|
|
@ -122,5 +123,6 @@ export default function loadPropertiesAndStyles(properties, styles, darkMode) {
|
|||
boxShadow,
|
||||
borderColor,
|
||||
columnHeaderWrap,
|
||||
headerCasing,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -310,6 +310,16 @@ export const tableConfig = {
|
|||
{ displayName: 'Wrap', value: 'wrap' },
|
||||
],
|
||||
},
|
||||
headerCasing: {
|
||||
type: 'switch',
|
||||
displayName: 'Header casing',
|
||||
validation: { schema: { type: 'string' } },
|
||||
accordian: 'Data',
|
||||
options: [
|
||||
{ displayName: 'AA', value: 'uppercase' },
|
||||
{ displayName: 'As typed', value: 'none' },
|
||||
],
|
||||
},
|
||||
tableType: {
|
||||
type: 'select',
|
||||
displayName: 'Row style',
|
||||
|
|
@ -529,6 +539,7 @@ export const tableConfig = {
|
|||
value: [
|
||||
{
|
||||
name: 'id',
|
||||
key: 'id',
|
||||
id: 'e3ecbf7fa52c4d7210a93edb8f43776267a489bad52bd108be9588f790126737',
|
||||
autogenerated: true,
|
||||
fxActiveFields: [],
|
||||
|
|
@ -548,6 +559,7 @@ export const tableConfig = {
|
|||
},
|
||||
{
|
||||
name: 'name',
|
||||
key: 'name',
|
||||
id: '5d2a3744a006388aadd012fcc15cc0dbcb5f9130e0fbb64c558561c97118754a',
|
||||
autogenerated: true,
|
||||
fxActiveFields: [],
|
||||
|
|
@ -556,6 +568,7 @@ export const tableConfig = {
|
|||
},
|
||||
{
|
||||
name: 'email',
|
||||
key: 'email',
|
||||
id: 'afc9a5091750a1bd4760e38760de3b4be11a43452ae8ae07ce2eebc569fe9a7f',
|
||||
autogenerated: true,
|
||||
fxActiveFields: [],
|
||||
|
|
@ -564,6 +577,7 @@ export const tableConfig = {
|
|||
},
|
||||
{
|
||||
name: 'date',
|
||||
key: 'date',
|
||||
id: '27b75c8af9d34d1eaa1f9bb7f8f9f7b0abf1823e799748c8bb57e74f53b2c1dc',
|
||||
autogenerated: true,
|
||||
fxActiveFields: [],
|
||||
|
|
@ -576,6 +590,7 @@ export const tableConfig = {
|
|||
},
|
||||
{
|
||||
name: 'mobile_number',
|
||||
key: 'mobile_number',
|
||||
id: '9c2e3c40572a4aefb8e179ee39a0e1ac9dc2b2e6634be56e1c05be13c3d1de56',
|
||||
autogenerated: true,
|
||||
fxActiveFields: [],
|
||||
|
|
@ -652,6 +667,7 @@ export const tableConfig = {
|
|||
styles: {
|
||||
textColor: { value: '#000' },
|
||||
columnHeaderWrap: { value: 'fixed' },
|
||||
headerCasing: { value: 'uppercase' },
|
||||
actionButtonRadius: { value: '0' },
|
||||
cellSize: { value: 'regular' },
|
||||
borderRadius: { value: '8' },
|
||||
|
|
|
|||
|
|
@ -310,6 +310,16 @@ export const tableConfig = {
|
|||
{ displayName: 'Wrap', value: 'wrap' },
|
||||
],
|
||||
},
|
||||
headerCasing: {
|
||||
type: 'switch',
|
||||
displayName: 'Header casing',
|
||||
validation: { schema: { type: 'string' } },
|
||||
accordian: 'Data',
|
||||
options: [
|
||||
{ displayName: 'AA', value: 'uppercase' },
|
||||
{ displayName: 'As typed', value: 'none' },
|
||||
],
|
||||
},
|
||||
tableType: {
|
||||
type: 'select',
|
||||
displayName: 'Row style',
|
||||
|
|
@ -530,6 +540,7 @@ export const tableConfig = {
|
|||
value: [
|
||||
{
|
||||
name: 'id',
|
||||
key: 'id',
|
||||
id: 'e3ecbf7fa52c4d7210a93edb8f43776267a489bad52bd108be9588f790126737',
|
||||
autogenerated: true,
|
||||
fxActiveFields: [],
|
||||
|
|
@ -549,6 +560,7 @@ export const tableConfig = {
|
|||
},
|
||||
{
|
||||
name: 'name',
|
||||
key: 'name',
|
||||
id: '5d2a3744a006388aadd012fcc15cc0dbcb5f9130e0fbb64c558561c97118754a',
|
||||
autogenerated: true,
|
||||
fxActiveFields: [],
|
||||
|
|
@ -557,6 +569,7 @@ export const tableConfig = {
|
|||
},
|
||||
{
|
||||
name: 'email',
|
||||
key: 'email',
|
||||
id: 'afc9a5091750a1bd4760e38760de3b4be11a43452ae8ae07ce2eebc569fe9a7f',
|
||||
autogenerated: true,
|
||||
fxActiveFields: [],
|
||||
|
|
@ -565,6 +578,7 @@ export const tableConfig = {
|
|||
},
|
||||
{
|
||||
name: 'date',
|
||||
key: 'date',
|
||||
id: '27b75c8af9d34d1eaa1f9bb7f8f9f7b0abf1823e799748c8bb57e74f53b2c1dc',
|
||||
autogenerated: true,
|
||||
fxActiveFields: [],
|
||||
|
|
@ -577,6 +591,7 @@ export const tableConfig = {
|
|||
},
|
||||
{
|
||||
name: 'phone',
|
||||
key: 'phone',
|
||||
id: '9c2e3c40572a4aefb8e179ee39a0e1ac9dc2b2e6634be56e1c05be13c3d1de56',
|
||||
autogenerated: true,
|
||||
fxActiveFields: [],
|
||||
|
|
@ -653,6 +668,7 @@ export const tableConfig = {
|
|||
styles: {
|
||||
textColor: { value: '#000' },
|
||||
columnHeaderWrap: { value: 'fixed' },
|
||||
headerCasing: { value: 'uppercase' },
|
||||
actionButtonRadius: { value: '0' },
|
||||
cellSize: { value: 'regular' },
|
||||
borderRadius: { value: '8' },
|
||||
|
|
|
|||
Loading…
Reference in a new issue