diff --git a/packages/app/src/components/views/Field/style.less b/packages/app/src/components/views/Field/style.less
index bb8f269f27..d86ade22eb 100644
--- a/packages/app/src/components/views/Field/style.less
+++ b/packages/app/src/components/views/Field/style.less
@@ -32,4 +32,9 @@
   > *:last-child {
     margin-bottom: 0;
   }
+}
+
+.ant-table-cell.noco-field-percent,
+.ant-table-cell.noco-field-number {
+  text-align: right;
 }
\ No newline at end of file
diff --git a/packages/app/src/components/views/SortableTable/index.tsx b/packages/app/src/components/views/SortableTable/index.tsx
index 105b24f457..472f769bf9 100644
--- a/packages/app/src/components/views/SortableTable/index.tsx
+++ b/packages/app/src/components/views/SortableTable/index.tsx
@@ -7,6 +7,7 @@ import findIndex from 'lodash/findIndex';
 import get from 'lodash/get';
 import './style.less';
 import Field from '../Field';
+import cloneDeep from 'lodash/cloneDeep';
 
 export const SortableItem = sortableElement(props => <tr {...props} />);
 export const SortableContainer = sortableContainer(props => <tbody {...props} />);
@@ -57,8 +58,10 @@ export const components = ({data = {}, rowKey, mutate, onMoved}: Props) => {
 };
 
 export function fields2columns(fields) {
-  const columns: any[] = fields.map(field => {
+  const columns: any[] = fields.map(item => {
+    const field = cloneDeep(item);
     field.render = (value) => field.interface === 'sort' ? <DragHandle/> : <Field viewType={'table'} schema={field} value={value}/>;
+    field.className = `${field.className||''} noco-field-${field.interface}`;
     return {
       ...field,
       ...(field.component||{}),