From 045aac4943bad7b9704059392962c6dcd4585774 Mon Sep 17 00:00:00 2001 From: Raju Udava <86527202+dstala@users.noreply.github.com> Date: Thu, 2 Dec 2021 16:16:16 +0530 Subject: [PATCH] Chore: Table operations updated --- .../content/en/setup-and-usages/tables.md | 117 +++++++++++------- 1 file changed, 70 insertions(+), 47 deletions(-) diff --git a/packages/noco-docs/content/en/setup-and-usages/tables.md b/packages/noco-docs/content/en/setup-and-usages/tables.md index 699068c727..43f7aded56 100644 --- a/packages/noco-docs/content/en/setup-and-usages/tables.md +++ b/packages/noco-docs/content/en/setup-and-usages/tables.md @@ -1,89 +1,112 @@ --- -title: 'Tables' -description: 'Tables' +title: "Table Operations" +description: "Table Operations" position: 20 -category: 'Usage' -menuTitle: 'Tables' +category: "Usage" +menuTitle: "Table Operations" --- +Once you have created a new NocoDB project you can open it, In the browser, the URL would be like `example.com/dashboard/#/nc/project_id`. -## Table Creation +## Table -Once you have created a new NocoDB project you can open it, In the browser, the URL would be like `example.com/dashboard/#/nc/project_id`. +### [Table] Create -Now you can start creating new tables, so let's begin the table creation by simply clicking one of the following options. +Now you can start creating new tables by simply clicking one of the following options. ![table_create](https://user-images.githubusercontent.com/61551451/126771744-063f22da-6def-43fe-b9ef-1744d104db9d.png) - On click, it will popup a table create a modal popup, in which you can enter the table name alias and table name. Enable/disable default columns and finally click the `Submit` button. - -![table_create_modal](https://user-images.githubusercontent.com/61551451/126772859-5a301c45-d830-4df2-a05a-43b15dd77728.png) +On click, in modal popup, enter the table name, enable/disable default columns and click `Submit` button. -> You can't disable the `id` column since we need a primary column for the table. +![table_create_modal](https://user-images.githubusercontent.com/61551451/126772859-5a301c45-d830-4df2-a05a-43b15dd77728.png) -After the successful submission, the table will create and open as a new tab. +> You can't disable the `id` column since NocoDB need's a primary column for every table. -![image](https://user-images.githubusercontent.com/61551451/126773614-c945f654-cba8-4dd6-bd5e-d74890543d11.png) +After the successful submission, the table will be created and open as a new tab. + + +![TableCreated](https://user-images.githubusercontent.com/86527202/144402089-b5e35564-80d5-4105-9e00-7e3e1c4a5030.png) -## Column Creation -Adding a column is simple, you have to click the `+` icon on the right corner of the table. +### [Table] Rename -![Pasted_Image_23_07_21__4_39_PM](https://user-images.githubusercontent.com/61551451/126773798-4470d632-69e0-4f5f-803b-e3597715fe22.png) +Right click on Table name on left hand project-tree menu, select `Rename` +In modal popup, enter new table name and click `Submit` button + + -After the click, it will show a menu and you can enter the column name and choose the column type ([Abstract type](./abstract-types)) from the column type. And finally, you can click the save button to create the new column. -![image](https://user-images.githubusercontent.com/61551451/126774157-ae9af236-e1ad-4a54-adb7-1b96775cae57.png) +### [Table] Delete -> For more about Abstract type [click here](./abstract-types). +The table can be deleted using the `delete` icon present in the toolbar within the table tab. + -Finally, we have our new column as part of our table. +## Column +### [Column] Add -![Pasted_Image_23_07_21__4_43_PM](https://user-images.githubusercontent.com/61551451/126774276-e947f510-2fe1-4595-afc1-a31d2c35a69a.png) +Click the `+` icon on the right corner of the table. +![Pasted_Image_23_07_21__4_39_PM](https://user-images.githubusercontent.com/61551451/126773798-4470d632-69e0-4f5f-803b-e3597715fe22.png) -## Row creation +After the click, it will show a menu and you can enter the column name and choose the column type ([Abstract type](./abstract-types)). +Click `Save`button to create the new column. -For adding new values to the table we need new rows, new rows can be added in two methods. +![image](https://user-images.githubusercontent.com/61551451/126774157-ae9af236-e1ad-4a54-adb7-1b96775cae57.png) + +& we have new column created as part of our table +![Pasted_Image_23_07_21__4_43_PM](https://user-images.githubusercontent.com/61551451/126774276-e947f510-2fe1-4595-afc1-a31d2c35a69a.png) + +> For more about Abstract type [click here](./abstract-types). -### Using Form +### [Column] Edit +To edit column properties, click/hover on down arrow, select `Edit` from the menu. + + + +You will be able to edit column name & associated datatype using pop-up modal. +For additional menu options, click `Show more options` + + -- Click the `+` icon in the toolbar of the table tab. - ![Pasted_Image_23_07_21__5_40_PM](https://user-images.githubusercontent.com/61551451/126783882-abd7e1dc-f13f-49bf-b44d-e66a06aacf5d.png) -- Now it will open a modal Form to enter the values, provide the values and press the save button. - ![Pasted_Image_23_07_21__6_22_PM](https://user-images.githubusercontent.com/61551451/126784347-b82f9dfd-4c6d-4d65-be07-80e051ff19de.png) -- After saving it will be there on your table. - ![image](https://user-images.githubusercontent.com/61551451/126785340-e9b80ad0-ba06-4a22-8a01-876d829c9673.png) +### [Column] Delete -### Using Table Row +Column deletion can be done by using the `delete` option from the column header menu. +![Pasted_Image_23_07_21__6_49_PM](https://user-images.githubusercontent.com/61551451/126787679-562aaa22-14b3-4ff8-8057-b8219e057110.png) -- Click the bottom row of the table which contains `+` icon at the beginning. - ![Pasted_Image_23_07_21__6_36_PM](https://user-images.githubusercontent.com/61551451/126786285-c5b4a614-ee3f-4ff9-8783-064f81b8b83d.png) -- Now it will add a new row in the table and you can start editing by any of the following methods - - Double click - - Click and start typing (this way it will clear the previous content) - - Click and press enter to start editing -- And it will automatically save on blur event or if inactive. +## Row - +For adding new values to the table we need new rows, new rows can be added in two methods. -## Table Deletion +### [Row] Add (Using Form) -The table can be deleted using the `delete` icon present in the toolbar within the table tab. +- Click the `+` icon in the toolbar of the table tab. + +- Now it will open a modal Form to enter the values, provide the values and press the save button. + +- After saving it will be there on your table. + ![image](https://user-images.githubusercontent.com/61551451/126785340-e9b80ad0-ba06-4a22-8a01-876d829c9673.png) -![Pasted_Image_23_07_21__6_45_PM](https://user-images.githubusercontent.com/61551451/126787235-6751cadf-3e8a-446d-9db8-0d6ec330b243.png) +### [Row] Add (Using Table Row at bottom of page) -## Column Deletion +- Click the bottom row of the table which contains `+` icon at the beginning. + +- Now it will add a new row in the table -Column deletion can be done by using the `delete` option from the column header menu. +### [Row] Edit +You can start editing by any of the following methods + - Double click on cell to edit + - Click on cell and start typing (this way it will clear the previous content) + - Click on cell and press enter to start editing +- And it will automatically save on blur event or if inactive. -![Pasted_Image_23_07_21__6_49_PM](https://user-images.githubusercontent.com/61551451/126787679-562aaa22-14b3-4ff8-8057-b8219e057110.png) +### [Row] Delete +Right-click on anywhere in the row and then from the context menu select `Delete Row` option. +Bulk delete is also possible by selecting multiple rows by using the checkbox in first column and then `Delete Selected Rows` options from the right click context menu. + -## Row Deletion -Right-click on anywhere in the row and then from the context menu select `Delete Row` option. Bulk delete is also possible by selecting multiple rows by using the checkbox in first column and then `Delete Selected Rows` options from the context menu. \ No newline at end of file